2012-12-13 52 views
0

這是我第一次使用backbone.js。我試圖得到一個JSON字符串解析出來,並填充我有一個模板。backbone.js json - > template

JSON:

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

CODE:

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

});

MARKUP:

<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字符串被讀取。但是,當涉及到實際的模板。它給我的錯誤:

未捕獲的ReferenceError:NAV沒有定義

這是從標記。

回答

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; 
} 
相關問題