backbonejs初學者問題 - 獲取和顯示json數據

Question

Im Backbone Backbone（不要恨我）但是我拉着我的頭髮試圖做一件非常簡單的事情。

林加載JSON文件（正常，因爲我可以看到它加載的螢火），我只是想撤出它的一些信息純粹是爲了測試（作爲我的第一個骨幹代碼）

但是，我不能得到這工作和結束與一個空白鋰標籤（代碼如下）

<ul id="phones"></ul> 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script> 

<script id="foo" type="text/template"> 
     <li><%= name %></li> 
    </script> 

<script> 

    var Phones = Backbone.Collection.extend({ 
     url:'http://backbone.local/phones/phones.json' 
    }) 
    var PhonesView = Backbone.View.extend({ 
     el:'#phones', 
     initialize:function(){ 
      this.collection = new Phones(); 
      this.collection.fetch(); 
      this.render(); 
     }, 
     template:_.template($('#foo').html()), 
     render:function(){ 
        var foo = this.collection.toJSON(); 
      $(this.el).html(this.template(foo)); 
      return this; 
     } 
    }) 
    var phonesView = new PhonesView(); 
</script> 

任何指標極大讚賞。

乾杯，

更新1

我認爲這可能是由於取爲異步，所以我叫呈現如下取的成功回調。該火災的console.log不錯，但仍然呈現的HTML沒有JSON數據（我也改爲使用把手）

 <script> 
     var Phones = Backbone.Collection.extend({ 
      url:'http://backbone.local/phones/phones.json' 
     }) 
     var PhonesView = Backbone.View.extend({ 
      el:'#phones', 
      initialize:function(){ 
       var self = this; 
       this.collection = new Phones(); 
       this.collection.fetch({ 
        success:function(){ 
         console.log('json loaded'); 
         self.render(); 
        } 
       }); 
      }, 
      template: Handlebars.compile('<li>sdsadsadsadsad {{name}} dsfcdfd</li>'), 
      render:function(){ 
       var foo = this.collection.toJSON(); 
       $(this.el).html(this.template(foo)); 
       return this; 
      } 
     }) 
     var phonesView = new PhonesView(); 
    </script> 

Answer 1

隨着把手，一個集合模板看起來是這樣的：

{{#items}} <li> {{name}} </li> {{/items}} 

您還需要將收集JSON包裝在一個items對象中，以便Handlebars模板可以像上面那樣引用它：

var foo = { items: this.collection.toJSON() }; 

編輯

這事實上是一個多種問題... collection.toJSON()不會每個模型轉換成JSON。所以，你需要寫：

this.collection.models.map(function(x) { return x.toJSON(); }); 

Fiddle Demo

Answer 2

在您的看法：

'initialize': function() { 
    this.template = _.template('<p><% model.text $></p>'); 
    this.collection.fetch({error: function() { console.log(arguments); }, 'success': _.bind(this.onFetch,this) }); 
    return this; 
}, 
'onFetch': function(collection) { 
    this.collection.on("add", this.onAdd, this);   
    this.collection.each(_.bind(this.onAdd, this)); 
    return this; 
}, 
'onAdd': function(model){  
    //do something like: 
    this.$el.find('.items').append(this.template({model: model})) 
); 

Answer 3

回答，爲什麼你只能得到您的明確問題一個空的李。您必須發送模板一些名稱數據。例如：

render:function(){ 
    var firstModel = this.collection.at(0); 
    var firstName = firstModel.get("name"); 
    $(this.el).html(this.template({name: firstName})); 
    return this; 
} 

當然，上面的代碼只是爲了解缺少什麼，而不是如何實現主幹應用。我真的建議您瀏覽一下Backbone網站鏈接的帶註釋的TODO示例，並瞭解在此實現的基本模式。

根據你的意見更新：
不同的解決方法。真心推薦閱讀：http://backbonejs.org/docs/todos.html

要繼續解決這個，所以你可以看到的東西的「哈克路徑」上：

addOne: function(phone) { 
    this.$el.append(this.template(phone.toJSON())); 
    return this; 
}, 

render: function() { 
    this.$el.html(); //clear everything in the view 
    this.collection.forEach(_.bind(this.addOne,this)); //Will call addOne for every model in the collection. 
    return this; 
}