backbone.js獲取數據到集合和模板

Question

我是backbone.js的新手，需要一點幫助將數據發送到模板。我使用一個模型與fetch和一個集合。這裏是代碼：

(function($) { 

var UserModel = Backbone.Model.extend({ 
    urlRoot : '/users', 
    defaults : { 
     name : '', 
     email : '' 
    }, 

    initialize : function() { 
     _.bindAll(this); 
     this.fetch(); 
    }, 
    parse : function(res) { 
     return JSON.stringify(res); 
    }, 

}); 

var users_coll = Backbone.Collection.extend({ 
    //model: UserModel 
    initialize : function() { 
     var u = new UserModel(); 
     this.model = u; 
    } 
}); 

var displayView = Backbone.View.extend({ 

    initialize : function() { 

     this.collection = new users_coll(); 
     //_.each(this.collection.models, alert); 
     //console.log(this.collection); 
     //alert(JSON.stringify(this.collection.models)); 

     this.render(); 
    }, 
    render : function() { 
     var tmpl = _.template($("#data-display-tpl").html()); 
     this.$el.html(tmpl); 

    } 
}); 

var view = new displayView({ 
    el : $("#data-display") 
}); 

    })(jQuery); 

它的工作很好，模型部分。在模型的解析函數中，我使用了console.log（），一切似乎都很好。我得到一個正確的格式json，並且抓取工作也很好。

但是，在我的集合中，當我嘗試console.log（user_coll.models）時，我什麼也沒有得到。 我想我可能會錯過一些非常小的東西。不知道是什麼，也許事情的流向都是錯誤的。

Answer 1

集合的模型屬性用於指定集合將包含模型的類型，並且如果指定了可以將集合傳遞給一個原始對象數組，它將添加並創建它們。從docs

重寫此屬性以指定集合 包含的模型類。如果定義，你可以通過原始屬性對象（和數組） 添加，創建和復位，並且屬性將被轉換成正確類型的 模型

所以當你的代碼中有

var u = new UserModel(); 
    this.model = u; 

您實際上並未將模型添加到集合中。相反，您可以使用收集add或fetch方法。

Answer 2

我試圖修改你的代碼只是有點點槽...希望它有助於澄清一些基本知識。

我還沒有嘗試提供的示例，但在理論上它應該工作;）

下面是他的榜樣應該做的事... 讓我們想象一下Twitter的應用程序，例如。 Twitter應用程序只有一個模型代表系統中的一個用戶。這就是用戶模型

var UserModel = Backbone.Model.extend({ 
    urlRoot : '/user', // this is just for modifying one specific user 
    defaults : { 
     name : '', 
     email : '' 
    }, 
    initialize : function() { 
     _.bindAll(this); 
     //this.fetch(); // WRONG: This call was "wrong" here 
          //  fetch() should be done on Collection not model 
    }, 
    parse : function(res) { 
     return JSON.stringify(res); 
    }, 
}); 

現在，你可以在Twitter上有許多用戶列表的權利。所以你有兩個列表。在一個列表中，您有朋友用戶，和其他家庭用戶

var UsersFriendsCollection = Backbone.Collection.extend({ 
    model: UserModel    // you tell Collection what type ob models it contains 
    url: '/users/friends', 
    initialize : function() { 
     // jabadaba whatever you need here 
    } 
}); 

var UsersFamilyCollection = Backbone.Collection.extend({ 
    model: UserModel    // you tell Collection what type ob models it contains 
    url: '/users/family', 
    initialize : function() { 
     // jabadaba whatever you need here 
    } 
}); 

...

var displayView = Backbone.View.extend({ 
    initialize : function() { 
     this.collection = new UsersFriendsCollection(); 
     this.collection.fetch();  // so you call fetch() on Collection, not Model 

     console.log(this.collection); // this should be populated now 

     //_.each(this.collection.models, alert); 
     //alert(JSON.stringify(this.collection.models)); 

     this.render(); 
    }, 
    render : function() { 
     // collection data is avail. in templating engine for iteration now 
     var tmpl = _.template($("#data-display-tpl").html(), this.collection); 
     this.$el.html(tmpl); 
    } 
});