更新集合時更新主干中的視圖

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]）

將模型（或模型數組）添加到集合中，從而觸發“添加”事件。 如果定義了模型屬性，則還可以傳遞原始屬性對象，並將其作為模型的實例來使用。 傳遞{at：index}以將模型拼接到指定索引處的集合中。 如果您要向集合中添加已經存在的模型，除非您通過{merge：true}，否則它們將被忽略，在這種情況下，它們的屬性將被合並到相應的模型中，從而觸發任何適當的“更改”事件。

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