2

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

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

我正在尝试通过跟踪每种葡萄酒的“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 - 从 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 关联起来在后端处理它，然后有一个单独的集合，一旦选择任务，该集合就会填充该集合- 我认为这不是首选方式，但它似乎是很多人的方式。

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

4

1 回答 1

1

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

也许这个答案可能适用： 使用骨干网清理视图？

如果没有，您应该回复 Edward M Smith 的评论并展示您的活动是如何被绑定的。

于 2012-06-01T15:46:51.330 回答