javascript - コレクションが更新されたときにバックボーンのビューを更新する

Question

私は構築中の Web アプリを持っています。名前を入力できるフォーム入力があります。この名前を入力すると、その入力された名前でリストを更新したいのですが、私の問題は、ある名前を追加してから別の名前を追加するとビューに出力された以前の名前は上書きされます (ただし、ページを更新すると完全なリストが表示されます)。ここに私のコードがあります、

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