Backbone.js 将更改事件绑定到模型内的集合

发布于 2024-11-09 13:03:46 字数 529 浏览 0 评论 0原文

我对 Backbone 还很陌生，所以如果这个问题有点明显，请原谅我。我在模型内部的集合上遇到问题。当集合更改时，它不会在模型中注册为更改（并且不会保存）。

我已经像这样设置了我的模型：

var Article = Backbone.Model.extend({

   defaults: {
       "emsID" :  $('html').attr('id')
   },

   initialize: function() { 
       this.tags = new App.Collections.Tags();
   },

   url: '/editorial_dev.php/api/1/article/persist.json'
});

如果我更新标签集合并手动保存模型，则效果很好：

this.model.tags.add({p : "a"});

this.model.save();

但如果未保存模型，则视图不会注意到更改。谁能看到我做错了什么吗？

原文

I'm pretty new to Backbone so excuse me if this question is a little obvious.
I am having problems with a collection inside of a model. When the collection changes it doesn't register as a change in the model (and doesn't save).

I have set up my model like so:

var Article = Backbone.Model.extend({

   defaults: {
       "emsID" :  $('html').attr('id')
   },

   initialize: function() { 
       this.tags = new App.Collections.Tags();
   },

   url: '/editorial_dev.php/api/1/article/persist.json'
});

This works fine if I update the tags collection and manually save the model:

this.model.tags.add({p : "a"});

this.model.save();

But if the model is not saved the view doesn't notice the change. Can anyone see what I am doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

§普罗旺斯的薰衣草 2024-11-16 13:03:46

initialize: function() { 
    this.tags = new App.Collections.Tags();
    var model = this;
    this.tags.bind("change", function() {
        model.save();
    });
},

绑定到内部集合上的 change 事件，然后在外部模型上手动调用 .save 。

initialize: function() { 
    this.tags = new App.Collections.Tags();
    var model = this;
    this.tags.bind("change", function() {
        model.save();
    });
},

Bind to the change event on the inner collection and just manually call .save on your outer model.

回复收藏 0 原文

冷血 2024-11-16 13:03:46

这实际上是@Raynos 答案的附录，但它足够长，我需要答案格式而不是评论格式。

显然OP想要在这里绑定到change和add，但其他人可能也想绑定到destroy。可能还有其他事件（我还不是 100% 熟悉所有事件），因此绑定到 all 将涵盖您的所有基础。
remove 也可以代替 destroy。请注意，删除模型时，remove 和 destroy 都会触发 - 首先是 destroy，然后是 remove。这会传播到集合并反转顺序：首先remove，然后destroy。例如
```
模型事件：销毁
模型事件：删除
收集事件：销毁
收集事件：删除
```
在模型或集合中调用 this.bind 引用 Underscore.js 绑定，NOT jQuery/Zepto 的。有什么区别？我注意到的最大的一个问题是你不能在一个字符串中用空格分隔指定多个事件。例如
```
this.bind('event1 event2 ...', ...)
```
此代码查找名为 event1 event2 ... 的事件。在 jQuery 中，这会将回调绑定到 event1、event2、... 如果要将一个函数绑定到多个事件，请将其绑定到 all 或为每个事件调用一次 bind 。 github 上为此提交了一个问题，因此这一问题有望得到改变。目前（2011 年 11 月 17 日），请对此保持警惕。

This is actually an addendum to @Raynos answer, but it's long enough that I need answer-formatting instead of comment-formatting.

Clearly OP wants to bind to change and add here, but other people may want to bind to destroy as well. There may be other events (I'm not 100% familiar with all of them yet), so binding to all would cover all your bases.
remove also works instead of destroy. Note that both remove and destroy fire when a model is deleted--first destroy, then remove. This propagates up to the collection and reverses order: remove first, then destroy. E.g.
```
model event      :      destroy
model event      :      remove
collection event :      destroy
collection event :      remove
```
There's a gotcha with custom event handlers described in this blog post.
Summary: Model-level events should propagate up to their collection, but can be prevented if something handles the event first and calls event.stopPropagation. If the event handler returns false, this is a jQuery shortcut for event.stopPropagation(); event.preventDefault();
Calling this.bind in a model or collection refers to Underscore.js's bind, NOT jQuery/Zepto's. What's the difference? The biggest one I noticed is that you cannot specify multiple events in a single string with space-separation. E.g.
```
this.bind('event1 event2 ...', ...)
```
This code looks for the event called event1 event2 .... In jQuery, this would bind the callback to event1, event2, ... If you want to bind a function to multiple events, bind it to all or call bind once for each event. There is an issue filed on github for this, so this one will hopefully change. For now (11/17/2011), be wary of this.