Backbone.js的`listento`不费一枪一过滤收集 [英] Backbone.js `listento` not firing for a filtered collection
问题描述
listento 只用火的全球征集，不是集合，我路过的时候它创建的视图。
例如：
VAR MyView的= Backbone.View.extend（{
初始化：功能（）{
this.listenTo（笔记，增加，this.test）; //＆LT; ---这将激活
this.listenTo（this.collection，增加，this.test）; //＆LT; - 这不火
}， 测试：功能（）{
的console.log（'模式添加到收藏'）
}
}）;
我传递的筛选集合中像这样创建视图时：
VAR notesFilteredByGroup = notes.filter_group（123）;
MyView的VAR =新MyView的（{
集合：notesFilteredByGroup
}）;
这里是注释系列：
注释= Backbone.Collection.extend（{
网址：'/笔记， 型号：注意， filter_group：功能（groupNum）{
过滤= this.filter（功能（注）{
返回note.get（'groupNum'）=== groupNum;
}）;
返回新的Notes（过滤）;
}
}）;
当我提出一个新的注释，它更新全球征集就好了。我该如何告诉 notesFilteredById 或 this.collection 来听添加模式？
编辑：
补充要求code，更改了一些变量名，使问题更加清晰
请注意提交code：
VAR AddNoteView = Backbone.View.extend（{
标签名：'格'， 模板：_.template（AddNoteTemplate） 事件：{
点击#noteSubmitButton'：'提交'
}， 初始化：功能（）{
this.render（）;
}， 渲染：功能（）{
变种模板= this.template（this.model.toJSON（））;
这$ el.html（模板）;
返回此;
}， 提交：函数（事件）{
。事件preventDefault（）; VAR newNote = {
文本：$（'＃文本）VAL（）。
groupNum：$（'＃groupNum）VAL（）
}; this.collection.create（newNote，{等待：真}）;
}
}）;
实例化AddNoteView：
VAR笔记=新的Notes;
notes.fetch（）;
VAR addNoteView =新AddNoteView（{
集合：笔记
}）;
我想你的注释全球征集初始化时看起来像这样
VAR笔记=新的Notes（）;
因此，这被传递到不同的看法。
但是当你过滤收集
VAR notesFilteredById = notes.filter_id（123）; ...
返回新的Notes（过滤）;
您在返回新笔记收集..
这将创建一个新的实例不具有相同的绑定，随着全球笔记。
因此，对于工作，你必须明确地添加创建过滤的收集以及模型。
像这样
//你需要传递到视图
VAR addNoteView =新AddNoteView（{
收藏：笔记，
filteredCollection：notesFilteredByGroup
}）;
在视图中，您需要明确地添加到其他集合
VAR AddNoteView = Backbone.View.extend（{
标签名：'格'， 模板：_.template（AddNoteTemplate） 事件：{
点击#noteSubmitButton'：'提交'
}， 初始化：功能（）{
this.listenTo（this.collection，添加，addToCollection）;
this.render（）;
}， 渲染：功能（）{
变种模板= this.template（this.model.toJSON（））;
这$ el.html（模板）;
返回此;
}，
addToCollection：函数（模型）{
//需要添加到另一个集合。
this.options.filteredCollection.add（模型）;
}，
提交：函数（事件）{
。事件preventDefault（）; VAR newNote = {
文本：$（'＃文本）VAL（）。
groupNum：$（'＃groupNum）VAL（）
}; this.collection.create（newNote，{等待：真}）;
}
}）;
listento only fires for the global collection, not the collection I am passing to the view when it's created.
For instance:
var MyView = Backbone.View.extend({
initialize: function() {
this.listenTo(notes, "add", this.test); // <--- THIS FIRES
this.listenTo(this.collection, "add", this.test); // <-- THIS DOES NOT FIRE
},
test: function() {
console.log('model added to collection')
}
});
I am passing in the filtered collection like so when creating the view:
var notesFilteredByGroup = notes.filter_group(123);
var myView = new MyView({
collection: notesFilteredByGroup
});
And here is the Notes collection:
Notes = Backbone.Collection.extend({
url: '/notes',
model: Note,
filter_group: function(groupNum) {
filtered = this.filter(function(note) {
return note.get('groupNum') === groupNum;
});
return new Notes(filtered);
}
});
When I submit a new note, it updates the global collection just fine. How do I tell the notesFilteredById or this.collection to listen for added models?
EDIT:
Added requested code, changed some variable names to make question clearer
Note submission code:
var AddNoteView = Backbone.View.extend({
tagName: 'div',
template: _.template( AddNoteTemplate ),
events: {
'click #noteSubmitButton': 'submit'
},
initialize: function() {
this.render();
},
render: function() {
var template = this.template( this.model.toJSON() );
this.$el.html(template);
return this;
},
submit: function(event) {
event.preventDefault();
var newNote = {
text: $('#text').val(),
groupNum: $('#groupNum').val(),
};
this.collection.create(newNote, {wait: true});
}
});
Instantiating AddNoteView:
var notes = new Notes;
notes.fetch();
var addNoteView = new AddNoteView({
collection: notes
});
I suppose your notes global collection when initialized looks like this
var notes = new Notes();
So this is passed over to different views.
But when you are filtering the collection
var notesFilteredById = notes.filter_id(123);
...
return new Notes(filtered);
You are returning a new notes collection..
This creates a new instance which do not have the same bindings as the global notes.
So for that to work you have to explicitly add the model created to the filtered collection as well.
Something like this
// You need to pass that into the view
var addNoteView = new AddNoteView({
collection: notes,
filteredCollection : notesFilteredByGroup
});
In the view you need to add that explicitly to the other collection
var AddNoteView = Backbone.View.extend({
tagName: 'div',
template: _.template( AddNoteTemplate ),
events: {
'click #noteSubmitButton': 'submit'
},
initialize: function() {
this.listenTo(this.collection, 'add', addToCollection);
this.render();
},
render: function() {
var template = this.template( this.model.toJSON() );
this.$el.html(template);
return this;
},
addToCollection : function(model) {
// Need to add to the other collection.
this.options.filteredCollection.add(model);
},
submit: function(event) {
event.preventDefault();
var newNote = {
text: $('#text').val(),
groupNum: $('#groupNum').val(),
};
this.collection.create(newNote, {wait: true});
}
});
这篇关于Backbone.js的`listento`不费一枪一过滤收集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
