템플릿이 백본 및 핸들 막대와 함께 작동하지 않습니다.

여기에 핸들 막대 및 백본으로 템플릿을 렌더링하는 데 문제가 있습니다. 각 블록이 작동하지 않는 이유를 모르겠습니다. 템플릿을 여러 번 작성하고 json을 다시 작성하지만 작동하지 않습니다. 누군가의 아이디어가 하면 당장 내 실수 :템플릿이 백본 및 핸들 막대와 함께 작동하지 않습니다.

여기

내 index.html을 :

<body> 
    <div id="page"> 

    </div> 
    <script type="text/x-handlebars-template" id="template"> 
     <h4> test template </h4> 
     {{#each rappers}} 
     <p>{{rappers.blazz}} !!!!!!</p> 
     {{/each}} 
    </script> 
</body>

나는이 결과를 가지고 :

test template 
!!!!!! 
!!!!!! 
!!!!!!

하지만를 {{blazz}} 여기에 값 ..

내 JS :

var Rapper = Backbone.Model.extend({ 
    // defaults : { 
    // blazz: "" 
    // }, 
    initialize: function() { 
     console.log("Création d'un nouveau rapper"); 
    } 
    }) 

    var Rappers = Backbone.Collection.extend({ 
    // defaults : { 
    // blazz: "pas de blazz" 
    // }, 
    model : Rapper, 
    url : './js/data.json' 
    }) 

    var RapperList = Backbone.View.extend({ 
    el:'#page', 
    render: function(){ 
     var that = this; 
     var rappers = new Rappers(); 
     rappers.fetch({ 
     success: function(rappers){ 
      var source = $("#template").html(); 
      var template = Handlebars.compile(source); 
      that.$el.html(template({rappers : rappers.toJSON()})); 
     } 
     }) 
    } 
    }); 



    var Router = Backbone.Router.extend({ 
    routes:{ 
     '' : 'home' 
    } 
    }); 

    var rapperList = new RapperList(); 

    var router = new Router(); 

    router.on('route:home',function(){ 
    rapperList.render(); 
    }) 

    Backbone.history.start();

그리고 내 JSON :

[ 
    {"rapper" : 
     [ 
      {"blazz" : "person1"}, 
      {"nom" : "paul"}, 
     ] 
    }, 
    {"rapper" : 
     [ 
      {"blazz" : "person2"}, 
      {"nom" : "mike"}, 
     ] 
    }, 
    {"rapper" : 
     [ 
      {"blazz" : "person3"}, 
      {"nom" : "jean"}, 
     ] 
    } 
]

출처

2014-05-25 user3264208

데이터를 재정렬 할 수 있습니까? 이와 같은 단일 엔트리 객체의 배열은 Handlebars와 잘 맞지 않습니다. 하나의'{blaze : 'person3', nom : 'jean'}'객체가 훨씬 쉽게 작업 할 수 있습니다. –

불행히도 서식 데이터를 유지해야합니다. – user3264208

내 솔루션을 {{blazz} 직접 사용하지 않음으로써 :

코드의 모양이 약간 바뀝니다. (그리고 몇 가지 항목을 더 추가했습니다). 여기

[ 
    { 
     "blazz" : "blazz1", 
     "prenom" : "prenom1", 
     "age" : 20, 
     "album" : 
      [ 
       { 
        "nom" : "album1", 
        "vente" : 1000} 
       , 
       { 
        "nom" : "album2", 
        "vente" : 10068 
       } 
      ] 
    }, 
    { 
     "blazz" : "blazz2", 
     "prenom" : "prenom2", 
     "age" : 15, 
     "album" : 
      [ 
       { 
        "nom" : "album1", 
        "vente" : 1000} 
       , 
       { 
        "nom" : "album2", 
        "vente" : 108798 
       } 
      ] 
    }, 
    { 
     "blazz" : "blazz3", 
     "prenom" : "prenom3", 
     "age" : 35, 
     "album" : 
      [ 
       { 
        "nom" : "album1", 
        "vente" : 6546 
          } 
       , 
       { 
        "nom" : "album2", 
        "vente" : 4816 
       } 
      ] 
    } 
]

새로운 템플릿 : 그래서 여기

새로운 JSON

{{#each rappers}} 
    <p>blazz: {{blazz}} prenom: {{prenom}} nom: {{nom}}</p> 
    <ul> 
    {{#each this.album}} 
    <li>nom: {{nom}}</li> 
    {{/each}} 
    </ul> 
    {{/each}}

의 차이는 여기에 있습니다 : 하기 전에 :

{"object" : 
    [ 
     {"foo" : "content"}, 
     {"foo" : "content"} 
    ] 
}

그리고 이후

{"object" : 

    [ 
     {"foo" : "content", 
     "foo" : "content"} 
    ] 
}

출처

2014-05-25 15:44:26 user3264208

당신이 시도 할 수 :

<body> 
    <div id="page"> 

    </div> 
    <script type="text/x-handlebars-template" id="template"> 
     <h4> test template </h4> 
     {{#each rappers}} 
     <p>{{blazz}} !!!!!!</p> 
     {{/each}} 
    </script> 
</body>

을 {{rappers.blazz} 여기

출처

2014-05-25 03:59:57

시도해 보았지만 아무 것도 변경되지 않았습니다. 나는 이미 "this.blazz"도 테스트 중입니다. – user3264208

그리고 이것 : this. [0] .blazz? –

동일한 결과가 나타납니다. – user3264208

템플릿이 백본 및 핸들 막대와 함께 작동하지 않습니다.

답변

관련 문제