Question

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

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

我正试图通过跟踪每个葡萄酒的“CheckIns”来扩展此tutorial以了解骨干关系，视图/子视图和事件处理。

我已经扩展了服务器端，为checkIns返回适当的JSON和骨干关系模型，如下所示：

window.CheckInModel = Backbone.RelationalModel.extend({
  defaults:{
        "_id":null,
        "Did":"true",
        "dateOf":"",
        }
});

window.CheckInCollection = Backbone.Collection.extend({
    model : CheckInModel
});

Wine Model如此：

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项视图的相关部分。

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);
    },

});

============================================== < / p>

关于事件绑定和关闭视图的注释是调试它的正确提示。

1）我没有正确关闭和解除嵌套视图的绑定，这留下了一些鬼事件消费者，即使DOM中没有任何东西

2）如果我们只想在子视图中做某事，你只需要绑定事件例如 - 如果我在子视图中有复选框，我可以在主视图中绑定子视图更改事件并在那里处理事件，因为主视图还有模型。我不知道这是否是“正确的”方式，但它适用于我需要做的事情。（mm ..意大利面条代码味道很好）

3）苦苦挣扎，这让我更多地考虑了UX，并帮助我简化了UI。

4）我试图通过将所有数据嵌套到JSON调用上来“保存”对服务器的调用。如果我要重新执行此操作 - 我根本不会嵌套数据，而是在后端通过将wine ID与checkIn ID相关联来处理它，然后在选择任务后使用单独的集合填充集合 - 我认为这不是一种首选的方式，但它似乎是很多人的方式。

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

Answer 1

我不确定发生的一切，但是，我遇到过多次事件触发的问题。如果您使用相同的视图渲染多个模型，则他们可能都被绑定到同一个事件。

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

如果没有，你应该回应爱德华·M·史密斯的评论，并说明你们的活动是如何受到约束的。

在骨干/骨干关系应用中查看+子视图

1 个答案: