查看主干/骨干中的+子视图
我一直在学习很多关于骨干，骨干关系和通过stackexchange构建web应用的建议 - 所以首先要感谢社区。
现在，我一直试图理解这个当前涉及嵌套模型和子视图的问题，在我看来，这是一个非常常见的用例。
我正在尝试扩展本教程，通过keepin跟踪每个葡萄酒的“CheckIns”来了解骨干关系，视图/子视图和事件处理。
我已经扩展了服务器端，为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 - 这一切似乎从用户界面的角度来看很好--ie。 一切正确呈现并保存到Db。
但我注意到在控制台中，当我推入一个新的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）如果我们只想在子视图中做某件事，你只需要绑定事件。
例如 - 如果我有子视图中的复选框，我可以在主视图中绑定子视图更改事件，并在那里处理事件，因为主视图具有模型。 我不知道这是否是“正确”的方式，但它适用于我需要做的事情。 （mm ..意大利面条代码味道很好）
3）通过这个努力，我帮助我更好地思考了UX，并帮助我简化了UI。
4）我试图通过将所有数据嵌入到JSON调用中来“保存”对服务器的调用。 如果我要重新执行此操作 - 我根本不会嵌套数据，而是在后端处理它，方法是将wine ID与checkIn ID相关联，然后在选择任务后拥有一个单独的集合，并将集合填充到集合中 - 我认为这不是首选的方式，但它似乎是很多人的方式。
仍然欢迎任何关于上述“正确”方式问题的想法，或者如果任何人都可以指出一个超越“简单骨干应用程序”的教程，
我不确定发生的一切，但是，我遇到过多次事件触发的问题。 如果您使用相同的视图呈现多个模型，则有可能它们都被绑定到相同的事件。
也许这个答案可能适用：使用backbone.js清理视图？
如果没有，你应该回应Edward M Smith的评论，并说明你的活动是如何受到约束的。
链接地址: http://www.djcxy.com/p/65523.html