Question

这里我有问题用手把和骨干渲染我的模板。我不知道为什么我的每个街区都不起作用。我多次重写我的模板和我的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"},
        ]
    }
]

Answer 1

你可以试试这个：

<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}

Answer 2

这是我的解决方案：

我略微改变了代码的形状。（并添加了一些项目。）

所以这里是新的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"}
    ]
}

模板不适用于Backbone和Handlebars

2 个答案: