在更新集合時更新骨幹視圖

Question

我有一個正在構建的Web應用程序，我有表單輸入，允許您輸入名稱，輸入此名稱時，我想用該輸入名稱更新列表，但我的問題是，如果添加一個名稱，然後另一個輸出到視圖的previos名稱被覆蓋（但如果我刷新頁面，我會得到完整列表）。這裏是我的代碼，

GroupModalHeaderView.prototype.render = function() { 
    this.$el.empty(); 
    if (this.model.isNew()) { 
    this.$el.append(this.template({ 
     m: this.model.toJSON() 
    })); 
    return this.edit(); 
    } else { 
    this.$el.append(this.template({ 
     m: this.model.toJSON() 
    })); 
    this.$el.find(".modal-header-menu").show(); 
    return this.$el.find(".icon-button-close-modal").show(); 
    } 
}; 



GroupModalHeaderView.prototype.save = function(e) { 
     var $collection, $this; 
     if (e) { 
     e.preventDefault(); 
     } 
     $this = this; 
     if (this.$("#group-name").val() !== "") { 
     $collection = this.collection; 
     if (this.model.isNew()) { 
      this.collection.push(this.model); 
     } 
     return this.model.save({ 
      name: this.$("#group-name").val(), 
      async: false, 
      wait: true 
     }, { 
      success: function() { 
      return $this.cancel(); 
      } 
     }); 
     } 
    }; 

GroupListView.prototype.events = { 
     "click .list-header-add": "add", 
     "click .list-header-expander": "showHide", 
     "keyup #search-query": "keyup" 
    }; 

    GroupListView.prototype.initialize = function() { 
     //console.log("fired"); 
     this.collection.on("change", this.renderList, this); 
     this.collection.on("reset", this.render, this); 
     return this.renderList(); 
    }; 

GroupListView.prototype.renderList = function(collection) { 
     var responsiveHeight = $("body").height() - 400; 
     if($("#people-network-requests").is(":visible")) { 
     this.$el.find("#people-groups-list").height($("#people-people-list").height()-250+"px"); 
     } else { 
     this.$el.find("#people-groups-list").height($("#people-people-list").height()+"px"); 
     } 
     var $collection, $this; 
     if (!collection) { 
     collection = this.collection; 
     } 
     this.$el.find(".list-items").empty(); 
     $this = this.$el.find("#people-groups-list"); 
     this.$el.find(".list-items").removeClass("list-items-loading").empty(); 
     $collection = collection; 
     if ($collection.length < 1) { 
     /*this.$el.find("#people-groups-inner").hide(); 
     $(".activity-no-show").remove(); 
     return this.$el.find("#people-groups-inner").append('<div class="activity-no-show">\ 
     <p>To add a new group, click the + in the top right hand corner to get started.</p>\ 
     </div>');*/ 
     } else { 
     this.collection.each(function(item) { 
      var displayView; 
      displayView = new app.GroupListDisplayView({ 
      model: item, 
      collection: $collection 
      }); 
      console.log($this); 
      return $this.append(displayView.render()); 
     }); 
     return this; 
     } 
    }; 

    return GroupListView; 

    })(app.BaseView); 

GroupListDisplayView.prototype.render = function() { 
     //console.log(this.$el); 
     //alert("1"); 
     var $body; 
     this.$el.html(this.template({ 
     m: this.model.toJSON() 
     })); 
     $body = this.$el.find(".card-body"); 
     $text = $body.text(); 
     $.each(this.model.get("people"), function(i, person) { 
     var personTile; 
     this.person = new app.Person({ 
      id: person.id, 
      avatar: person.avatar, 
      first_name: person.first_name, 
      last_name: person.last_name 
     }); 
     personTile = new app.PersonTileView({ 
      model: this.person 
     }); 
     if(person.id) { 
      $body.append(personTile.render()).find(".instruction").remove(); 
     } 
     }); 
     return this.$el.attr("id", "group-card-" + this.model.id); 
    }; 

GroupListView.prototype.keyup = function() { 
     this.filtered = $collection.searchName(this.$el.find("#search-query").val()); 
     //console.log(this.filtered); 
     return this.renderList(this.filtered); 
    }; 

Answer 1

this.collection.on("add", this.addDisplayView, this); 

然後創建一個接受的視圖模型的功能addDisplayView。您需要重構this.collection.each(function(item)...部分代碼才能使用addDisplayView函數。

GroupListView.prototype.addDisplayView = function(model){ 
    var displayView = new app.GroupListDisplayView({ 
     model: model, 
     collection: this.collection 
    }); 
    // use this.$, as it is already mapped to the context of the view 
    return this.$("#people-groups-list").append(displayView.render()); 
} 

你也應該this.collection.push(this.model);到this.collection.add(this.model);

addcollection.add(models, [options])

Add a model (or an array of models) to the collection, firing an "add" event. If a model property is defined, you may also pass raw attributes objects, and have them be vivified as instances of the model. Pass {at: index} to splice the model into the collection at the specified index. If you're adding models to the collection that are already in the collection, they'll be ignored, unless you pass {merge: true}, in which case their attributes will be merged into the corresponding models, firing any appropriate "change" events.

http://documentcloud.github.io/backbone/#Collection-add