0

backbone.jsを使用するのはこれが初めてです。私はjson文字列を取得して、自分が持っているテンプレートを解析して入力しようとしています。

JSON：

[
{
    "nav":{
            "feel":"Feel Well",
            "eat":"Eat Well",
            "move":"Move Well",
            "work":"Work Well",
            "sleep":"Sleep Well",
            "play":"Play Well"
    }
}
]

コード：

//collection        
WH.ApplicationCollection = Backbone.Collection.extend({

  defaults: {
    model: WH.ApplicationModel
  },

  model: WH.ApplicationModel,
  url: 'json/test.json'

});

// View
WH.applicationView = Backbone.View.extend({

el: 'body',
template: _.template($('#header-template').html()),


initialize: function(){
    this.collection = new WH.ApplicationCollection();
    this.collection.bind("reset", this.render, this);
    this.collection.fetch();
},

render: function(){
    console.log(this.collection.toJSON());
    $(this.el).html(this.template(this.collection.toJSON));
    return this;
}

}）;

マークアップ：

 <script id="header-template" type="text/template">
    <div id="header">
        <ul id="navigation">
            <li id="logo"><a data-target="home" data-index="0" href="#/home"><h1></h1></a></li>
            <% _.each(nav, function(navitem){ %>
                <li><a data-target="<%= navitem %>" data-index="1" href="#/<%= navitem %>">Feel Well</a></li>
            <% }); %>
        </ul>
    </div>
</script>

console.logは、JSON文字列が読み取られていることを示しています。しかし、実際のテンプレートに関しては。それは私にエラーを与えます：

Uncaught ReferenceError：navが定義されていません

これはマークアップからです。

4

1 に答える 1

1 
render: function(){
    console.log(this.collection.toJSON());
    $(this.el).html(this.template(this.collection.toJSON()));
    return this;
}

toJSONは関数です

テンプレートのマークアップを確認する必要があります。モデルに応じて失敗することは間違いありません。

私はあなたのコードを引用します

render: function(){
    console.log(this.collection.toJSON());
    $(this.el).html(this.template(this.collection.toJSON));
    return this;
}
于 2012-12-13T18:31:53.690 に答える