Backbone，解析JSON，然後如何觸發渲染？

今天是我的第一天backbone.js所以在這裏輕鬆點我。我有一個view，一個collection和一個model填充select。Backbone，解析JSON，然後如何觸發渲染？

我可以使用硬編碼array填充select。但我正在使用現有的API，我需要先解析響應。這似乎也行得通。

我不知道是誰來告訴發生了什麼變化，以便呈現我最近返回的結果/模型......代碼應該更有意義如果這沒有幫助。

var UserGroup = Backbone.Model.extend(); 

var UserGroups = Backbone.Collection.extend({ 

    initialize:function(){ 
     this.fetch(); 
    }, 

    model: UserGroup, 

    url: "http://myAPI/getUserGroups", 

    parse: function(json){ 

     return json["GetUserGroups"]["Results"]; 
    } 

}); 

var GroupSelectView = Backbone.View.extend({ 

    el: $("select"), 

    initialize: function() { 
     var that = this; 

     this.collection = new UserGroups(); 

     this.render(); 

    }, 

    render: function(){ 
     _.each(this.collection.models, function(group){ 
      $("<option/>", { value: group.get("Id"), text: group.get("Name")}).appendTo(this.el) 
     }, this); 
    }, 
}); 

var groupSelectView = new GroupSelectView();

你認爲什麼？我知道了嗎？

來源

2012-10-09 JonWells

爲了更靈活一點，您可以聽reset和add事件。

集合是reset當您從服務器（或本地）fetch，但如果你add模型或fetch與add選項，每個模型的加載事件，而不是解僱。

Backbone.js:fetch

這應該工作：

var GroupSelectView = Backbone.View.extend({ 

    initialize: function() { 
     var that = this; 

     this.setElement($("select")); 
     this.collection = new UserGroups(); 

     // listen to add and reset events but handle them differently 
     // fired on collection.add(model) and collection.fetch({add: true}) 
     this.collection.on("add", this.renderItem, this); 
     // fired on collection.fetch() 
     this.collection.on("reset", this.render, this); 

    }, 

    render: function(){ 
     // backbone collections already come with some underscore methods built in 
     this.collection.each(this.renderItem, this); 
    }, 

    renderItem: function(group) { 
     this.$el.append($("<option/>", { 
      value: group.get("Id"), 
      text: group.get("Name")}) 
     ); 
    } 
});

來源

2012-10-09 13:06:05

你可以做休耕...

var GroupSelectView = Backbone.View.extend({ 

    el: $("select"), 

    initialize: function() { 
     var that = this; 

     this.collection = new UserGroups(); 
     this.collection.on('change', this.render, this); 


    // You could try this too, 1 is for 1 item is added, the other, when all items are changed 
    // this.postCollection.on('add', this.addOne, this); 
    // this.postCollection.on('reset', this.addAll, this); 

     this.render(); 

    }, 

    render: function(){ 
     _.each(this.collection.models, function(group){ 
      $("<option/>", { value: group.get("Id"), text: group.get("Name")}).appendTo(this.el) 
     }, this); 
    }, 
});

來源

2012-10-09 12:54:58 jodarove

我想這orignally但不變的情況下心不是被解僱，或者我應該手動觸發它？ – JonWells

是這樣的：this.fetch（{success：function（）{that.trigger（「change」）}}）; – JonWells

@CrimsonChin在對象發生變化時觸發（在這種情況下，UserGroup集合）在獲取或重置時會觸發更改事件，所以它會調用render方法 – jodarove

您可以使用Backbone.Events發佈/訂閱的變化。點擊鏈接瞭解更多信息。

模型和集合具有爲常見用例觸發的內置事件，例如獲取已更改模型的屬性（'更改'）和已獲取集合的模型（「重置」）。

要觸發的變化（發佈）：

myObject.trigger（ '事件'）;

要訂閱的改變（用戶）

myObject.on('event',myCallback,context);

設置myCallBack函數到您的視圖的渲染方法。

查看this post瞭解Backbone Events的更多詳情。

來源

2012-10-09 13:01:22 Pramod

Backbone，解析JSON，然後如何觸發渲染？

回答

相關問題