模板不支持主幹和把手

在這裏我有問題要呈現我的模板與把手和骨幹。我不知道爲什麼我的每個塊都不起作用。我重寫我的模板幾次和我的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

這裏我的解決辦法：

我稍微改變了代碼的形狀。（並添加了幾個項目）。

所以這裏的新JSON：

[ 
    { 
     "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 
       } 
      ] 
    } 
]

，這裏的新模板：

{{#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>

通過使用直接{{} blazz而不是{{} rappers.blazz

來源

2014-05-25 03:59:57

我嘗試一下，但沒有任何變化。我已經測試過「this.blazz」了 – user3264208

而這個：[0] .blazz？ –

我得到了同樣的結果 – user3264208

模板不支持主幹和把手

回答

相關問題