主干/骨干关系应用程序中的视图 + 子视图

Question

通过阅读 stackexchange，我学到了很多关于骨干网、骨干网关系和构建网络应用程序的知识 - 所以首先要感谢社区。

现在，我一直在试图理解这个当前涉及嵌套模型和子视图的问题，在我看来这是一个非常常见的用例。

我正在尝试扩展此tutorial，以通过跟踪每种葡萄酒的“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 - 从 UI 的角度来看，这一切似乎都可以正常工作 - 即。一切都正确呈现并保存到 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 调用中来“保存”对服务器的调用。如果我要重新执行此操作 - 我根本不会嵌套数据，而是通过将葡萄酒 ID 与 checkIn ID 关联起来在后端处理它，然后有一个单独的集合，一旦选择任务，该集合就会填充该集合- 我认为这不是首选方式，但它似乎是很多人的方式。

仍然欢迎对上述“正确”方式问题的任何想法，或者是否有人可以指出超出“简单主干应用程序”的教程

Answer 1

我不确定正在发生的所有事情，但是，我之前遇到过多次触发事件的问题。如果您使用同一个视图渲染多个模型，则它们有可能都绑定到同一个事件。

也许这个答案可能适用： Cleaning views with backbone.js?

如果没有，您应该回复 Edward M Smith 的评论并说明您的事件是如何被绑定的。