View + Sub Views в базовом / базово-реляционном приложении

Question

Я много узнал о магистральной, реляционной и построении веб-приложений из чтения через stackexchange - так что сначала спасибо сообществу.

Теперь я застрял в попытке понять эту текущую проблему, связанную с вложенными моделями и вложенными представлениями, в том, что мне кажется довольно распространенным вариантом использования.

Я пытаюсь расширить это руководство, чтобы узнать о базовых отношениях, представлениях / подпредставлениях и обработке событий, отслеживая "CheckIns" для каждого вина.

Я продлил на стороне сервера, чтобы вернуть соответствующий JSON и магистральную-реляционная модель возвраты, как так:

window.CheckInModel = Backbone.RelationalModel.extend({
  defaults:{
        "_id":null,
        "Did":"true",
        "dateOf":"",
        }
});

window.CheckInCollection = Backbone.Collection.extend({
    model : CheckInModel
});

А вот модель вина вот так:

relations: [{
 type: Backbone.HasMany, 
 key:'CheckIn',
 relatedModel: 'CheckInModel',
 collectionType: CheckInCollection,
     }] 

Я создал CheckInListView и CheckInItemView (так же, как WineListView и WineListItemView) и использую функцию WineView Render для визуализации CheckIns следующим образом:

render:function (eventName) {
    console.log("wine View Render");
    $(this.el).html(this.template(this.model.toJSON()));

    this.myCheckInListView = new CheckInListView({model: this.model.attributes.CheckIn}); 
    this.$el.append(this.myCheckInListView.render().el);
    return this;
},

Я также создал новую функцию в wineview, которая создает регистрацию и связана с данным событием:

logcheckin: function (event){
  var todate = new Date();
  newCheckIn = new CheckInModel ({'Did':"true", 'dateOf': todate.toISOString()});
  console.log ("Logcheckin - About to push newCheckIn onto Model.");
  this.model.attributes.CheckIn.push (newCheckIn); 
  console.log ("Just pushed newCheckIn onto Model.");
  this.saveWine();

}

Хорошо, если у вас еще нет TL/DRed, кажется, все это работает нормально с точки зрения пользовательского интерфейса, т.е. все рендерится правильно и сохраняет в БД.

Но я заметил в консоли, что когда я нажимаю новый CheckIn (между console.logs выше), привязка Add CheckInListView вызывается несколько раз для каждого нажатия кнопки - что заставляет меня думать, что что-то не так с тем, как я делаю представления или что Я не понимаю что-то фундаментальное в распространении событий.

Почему это происходит? Это ожидаемое поведение? Я подхожу к тому, что пытаюсь сделать правильно?

Спасибо за чтение, если не ваша помощь.

==

Вот соответствующие части представлений CheckinListView и CheckInList Item, которые связаны с событиями добавления (и других).

window.CheckInListView = Backbone.View.extend({

        initialize:function () {
        this.model.bind("reset", this.render, this);
        this.model.bind("change", this.render, this);
        var self = this;
        this.model.bind("add", function (CheckIn) {
           console.log ("Adding to CheckInListView - a CheckIn List Item", CheckIn);
           self.$el.append(new CheckInListItemView({model:CheckIn}).render().el);
        });
    },  


       close:function () {
        $(this.el).unbind();
        $(this.el).remove();
    }
});

window.CheckInListItemView = Backbone.View.extend({

    initialize:function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

});

==============================================

Комментарий о привязке событий и закрывающих представлениях был правильными подсказками для отладки этого.

1) Я не закрывал и не связывал вложенные представления должным образом, что оставляло некоторых потребителей-призраков, даже если в DOM ничего не было

2) Вам нужно только связать события, если мы хотим что-то сделать только в подпредставлении.
Например - если у меня есть флажок в подпредставлении, я могу связать событие изменения подпредставления в главном представлении и обработать событие там, так как в любом случае в главном представлении есть модель. Я не знаю, является ли это "правильным" способом, но он работает для того, что мне нужно сделать. (мм.. код спагетти на вкус так хорошо)

3) Борьба с этим помогла мне еще больше продумать UX и упростить интерфейс.

4) Я пытался "сохранить" вызовы на сервере, вложив все данные в вызов JSON. И если бы я сделал это заново - я бы вообще не вкладывал данные, а обрабатывал бы их на бэкэнде, связывая идентификатор вина с идентификатором checkIn, а затем имея отдельную коллекцию, которая заполняется коллекцией после выбора задачи. - Я думал, что это не будет предпочтительным способом, но, похоже, это так, как многие люди.

Тем не менее, приветствуем любые мысли по поводу "правильных" вопросов выше или, если кто-то может указать на учебник, который выходит за рамки "простого базового приложения"

Answer 1

Я не уверен во всем, что происходит, но я столкнулся с проблемой запуска событий несколько раз. Если вы рендерите несколько моделей с использованием одного и того же представления, есть вероятность, что все они связаны с одним и тем же событием.

Возможно, этот ответ может быть применим: очистка представлений с помощью backbone.js?

Если нет, вы должны ответить на комментарий Эдварда Смита и показать, как связаны ваши события.