Javascript 更新集合时更新主干中的视图

我有一个我正在构建的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);
    };

GroupModalHeaderView.prototype.render=function（）{
这个。$el.empty（）；
if（this.model.isNew（））{
this.$el.append（this.template({
m：this.model.toJSON（）
}));
返回这个.edit（）；
}否则{
this.$el.append（this.template({
m：this.model.toJSON（）
}));
这是.el.find（“.modal header menu”）.show（）；
返回此.el.find（“.icon-button-close-modal”）.show（）；
}
};
GroupModalHeaderView.prototype.save=函数（e）{
var$collection，$this；
如果（e）{
e、 预防默认值（）；
}
$this=这个；
如果（此.$（“#组名”）.val（）！=“”）{
$collection=this.collection；
if（this.model.isNew（））{
this.collection.push（this.model）；
}
返回此.model.save({
名称：this.$（“#组名”）.val（），
async:false，
等等：是吗
}, {
成功：函数（）{
返回$this.cancel（）；
}
});
}
};
GroupListView.prototype.events={
“单击列表标题添加”：“添加”，
“单击列表标题扩展器”：“显示隐藏”，
“键控#搜索查询”：“键控”
};
GroupListView.prototype.initialize=函数（）{
//控制台日志（“已启动”）；
this.collection.on（“change”，this.renderList，this）；
this.collection.on（“重置”，this.render，this）；
返回这个.renderList（）；
};
GroupListView.prototype.renderList=函数（集合）{
var responsiveHeight=$（“body”）.height（）-400；
如果（$（“#人员网络请求”）。为（“：可见”））{
此.el.find（“#人员组列表”）.height（$（“#人员列表”）.height（）-250+“px”）；
}否则{
此.el.find（“#人员组列表”）.height（$（“#人员列表”）.height（）+“px”）；
}
var$collection，$this；
如果（！集合）{
collection=this.collection；
}
此.el.find（“.list items”）.empty（）；
$this=this.$el.find（“#人员组列表”）；
此.el.find（“.list items”）.removeClass（“list items加载”）.empty（）；
$collection=collection；
如果（$collection.length<1）{
/*这个.el.find（“#人员组内部”）.hide（）；
$（“.activity no show”）.remove（）；
返回此项。$el.find（#内部人员组”）.append（'\
要添加新组，请单击右上角的+开始操作。
\
');*/
}否则{
此.集合.每个（功能（项）{
var显示视图；
displayView=新建app.GroupListDisplayView({
型号：项目，
收款：$collection
});
console.log（$this）；
返回$this.append（displayView.render（））；
});
归还这个；
}
};
返回GroupListView；
})（应用程序BaseView）；
GroupListDisplayView.prototype.render=函数（）{
//console.log（这个$el）；
//警报（“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（“人”），function（i，person）{
变异人；
this.person=新的app.person({
id:person.id，
化身：person.avatar，
名字：person.first\u name，
姓氏：person.last_name
});
personTile=新建app.PersonTileView({
模特：这个人
});
如果（person.id）{
$body.append（personTile.render（））.find（“.instruction”）.remove（）；
}
});
返回此.$el.attr（“id”，“组卡-”+此.model.id）；
};
GroupListView.prototype.keyup=函数（）{
this.filtered=$collection.searchName（this.el.find（“#搜索查询”）.val（））；
//console.log（this.filtered）；
返回this.renderList（this.filtered）；
};

然后创建一个接受视图模型的函数

addDisplayView

。您需要重构

this.collection.each（函数（项）.

部分代码才能使用

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（型号，[选项]）

将模型（或模型数组）添加到集合中，触发“添加”事件 定义后，还可以传递原始属性对象，并将其 vivified为模型实例。传递{at:index}以拼接 在指定索引处将模型添加到集合中。如果要添加 将已在集合中的模型添加到集合中，它们将 被忽略，除非传递{merge:true}，在这种情况下 属性将合并到相应的模型中，触发任何 适当的“改变”事件

---

好奇的是，为什么要使用prototype而不是Backbone.View.extend？继承的代码，project目前还没有进行重构，所以我一直在思考previos开发人员目前所做的工作，addDisplayView实际上做了什么？我已经有了一个构建viewGroupListView.prototype.addDisplayView的函数创建DisplayView。我将模拟一些东西。谢谢-我在添加集合时也会运行此操作，但在刷新页面之前，它仍然会覆盖上次输入的名称，这几乎就像我添加到一个集合中，然后从另一个完全不同的集合中读取一样。对，如果在添加第一个集合后再添加一个名称，这看起来像是这样的s、 collection.on（“更改”）或this.collection.on（“添加”不触发）是否可能？为什么

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());
}