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

Question

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

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

Я пытаюсь расширить этот tutorial, чтобы узнать о рекомбинации, просмотрах/подзаголовках и обработке событий с помощью keepin track of «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 для визуализации таких проверок:

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

}

Ok - если вы еще не TL/DRED еще - Это все похоже, отлично работает с точки зрения пользовательского интерфейса -ie. все делает правильно и сохраняет Db.

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

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

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

==

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

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) Вам нужно только связать события, если мы хотим сделать что-то только в подвью.
Например: если у меня есть флажок в подвью, я могу привязать событие изменения subview в главном представлении и обрабатывать событие там, так как в mainview есть модель. Я не знаю, является ли это «правильным» способом, но он работает для того, что мне нужно делать. (Мм ..код спагетти настолько хорош)

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

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

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

Answer 1

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

Возможно, этот ответ может применяться: Cleaning views with backbone.js?

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