Я много узнал об магистральных, магистрально-реляционных и строительных веб-приложениях, читая через stackexchange, поэтому прежде всего спасибо сообществу.
Теперь я застрял в попытке понять эту текущую проблему, связанную с вложенными моделями и под-представлениями, в том, что, как мне кажется, является довольно распространенным вариантом использования.
Я пытаюсь продлить этот учебник, чтобы узнать об основах, представлениях / подпредставлениях и обработке событий, отслеживая "CheckIns" для каждого вина.
Я расширил серверную часть, чтобы она возвращала соответствующий JSON и базовую реляционную модель для checkIns следующим образом:
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 выше), привязка CheckInListView Add вызывается несколько раз для нажатия кнопки wach - что заставляет меня думать, что что-то не так с тем, как я делаю просмотры или что Я не понимаю чего-то фундаментального в распространении событий.
Почему это происходит ? Это ожидаемое поведение? Я правильно подхожу к тому, что пытаюсь сделать?
Спасибо, что прочитали, если не ваша помощь.
==
Вот соответствующие части представлений 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) Вам нужно связывать события только в том случае, если мы хотим что-то делать только в подпредставлении.
Например - Если у меня есть флажок в подпредставлении, я могу связать событие изменения подпредставления в основном представлении и обрабатывать событие там, так как В mainview все равно есть модель. Я не знаю, является ли это «правильным» способом, но он работает для того, что мне нужно делать. (ммм .. спагетти такой вкусный)
3) Борьба с этим помогла мне еще немного обдумать UX и упростить UI.
4) Я пытался «сохранить» вызовы на сервер, вложив все данные в вызов JSON. И если бы я сделал это повторно - я бы вообще не вкладывал данные, а обрабатывал бы их на задней панели, связывая идентификатор вина с идентификатором checkIn, а затем имея отдельную коллекцию, которая заполняется коллекцией после выбора задачи. - Я думал, что это будет не лучший способ, но, похоже, так делают многие люди.
Тем не менее приветствую любые мысли о «правильном» вопросе выше или если кто-нибудь может указать на учебник, который выходит за рамки «простого базового приложения».
