Backbone.js和undercore.js将其绑定到this.collection.add
Backbone.js and underscore.js binding this to this.collection.add
我在使用的教程中遇到问题
this.collection.bind('add',appendItem)
和
this.collection.bind('add',appendSet)
appendItem是在backbone.js视图中为视图集合定义的函数。appendSet也是一样。问题是我想通过嵌套模型来扩展教程,但当我添加一个项目时,如果我使用上面的行,我已经将appendItem和appendSet绑定到添加函数,所以添加函数不知道这应该是什么。
(关于绑定功能的快速提醒:http://underscorejs.org/#bind)
那么我如何仍然使用
this.collection.add(thisItem)
并且仍然避免了绑定问题简而言之:有没有一种方法可以在不使用绑定函数的情况下调用this.collection.add(thisItem)并告诉add函数关键字"this"应该指appendItem?
如果需要,我可以包含我的代码,但我认为它有点长,有点笨拙,而且可能无论如何都没有用处。
编辑:
我的代码的逻辑是这样的。项是一个具有多个属性和与其关联的集合的模型。我只是在学习一个教程,他让这些对象呈现的方式是使用this.collection.bind('add',appendItem),这样当你调用this.collection.add时,就会调用appendItem。这是appendItem:的代码
appendItem: function(item){
alert("append exercise called in allExerciseview");
var itemView=new ItemView({
model: Item
});
$('ul',this.el).append(itemView.renderItem().el);
}
我找不到this.collection.add的源代码,但我假设在该函数中有这个引用appendItem调用appendItem函数简而言之:原因是这个代码:
this.collection.bind('add',appendItem)
这样当你呼叫时
this.collection.add(thisItem)
它还运行
thisItem.appendItem()
取消绑定,只运行this.collection.add(thisItem),然后单独运行thisItem.appendItem()对我来说不起作用。
我的示例代码:
(function($){
Backbone.sync = function(method, model, success, error) {
success();
};
var Set = Backbone.Model.extend({
defaults: {
SetName:"Set "
//more properties...
},
initialize: function(){
alert("you've created a new set");
this.bind("error",function(model,error){
alert(error);
});
}
});
var SetCollection = Backbone.Collection.extend({
model:Set
});
var SetView = Backbone.View.extend({
events: {
'click button.deleteSet': 'removeSet'
},
initialize: function(){
alert('initialize called in setview');
_.bindAll(this,'renderSet', 'unrenderSet', 'removeSet');
/*this.model.bind('change',this.renderSet);
this.model.bind('remove',this.unrender); Not sure if I should do this*/
return this; //apparently for chainable calls
},
renderSet: function(){
alert('renderset called in setview');
$(this.el).html('a set template'); //add button after so you can test delete
return this;
},
unrenderSet: function(){
alert('unrenderset called in setview');
$(this.el).remove();
},
removeSet: function(){
alert('removeset called in setview');
this.model.destroy();
}
});
var AllSetView = Backbone.View.extend({
el: $('body'), //el attaches to existing element <-- what does this mean?
events: {
'click button#addSetButton': 'addSet'
},
initialize: function(){
alert('initialize called in allsetview');
_.bindAll(this,'renderAllSet', 'addSet', 'appendSet');
this.collection = new SetCollection();
this.collection.bind('add', this.appendSet); // Problem here...
this.counter = 0;
this.renderAllSet();
},
renderAllSet: function(){
alert('renderallset called in allsetview');
var self = this;
$(this.el).append('<button id="addSetButton"> Add Set </button>');
$(this.el).append('<ul></ul>');
_(this.collection.models).each(function(set){ //in case collection is not empty
self.appendSet(set);
},this);
},
addSet: function(){
alert('addSet called in allsetview');
this.counter++;
var thisSet = new Set();
thisSet.set({SetName:thisSet.get('SetName')+this.counter});
this.collection.add(thisSet); //add is a function defined for the collection
},
appendSet: function(item){
alert("append set called in allsetview");
var setView = new SetView({
model: Set //DO NOT CAPITALIZE!!!... or do capitalize?... ack
});
$('ul',this.el).append(setView.renderSet().el);
}
});
var allsetview = new AllSetView(); //for testing
var Item = Backbone.Model.extend({
defaults: {
ItemName: 'Enter an Item'
//more properties
},
initialize: function(){
alert('youve created a new item');
var set1 = new Set();
var setCollection = new SetCollection([set1]);
this.set({sets:setCollection});
this.bind("error",function(model,error){
alert(error);
});
}
});
var ItemCollection = Backbone.Collection.extend({
model:Item
});
var ItemView = Backbone.View.extend({
events: {
'click button.deleteItem': 'removeItem'
},
initialize: function(){
alert('initialize called in itemview');
_.bindAll(this,'renderItem', 'unrenderItem', 'removeItem');
//this.model.bind('change',this.renderItem);
//this.model.bind('remove',this.unrender); Not sure if I should do this
return this; //apparently for chainable calls
},
renderItem: function(){
alert('renderitem called in Itemview');
$(this.el).html('an item template'); //add button after so you can test delete
return this;
},
unrenderItem: function(){
alert('unrenderitem called in itemview');
$(this.el).remove();
},
removeItem: function(){
alert('removeItem called in itemview');
this.model.destroy();
}
});
alert ("before itemview creation");
var itemview = new ItemView();
alert ("now after");
var AllItemView = Backbone.View.extend({
el: $('body'), //el attaches to existing element <-- what does this mean?
events: {
'click button#addItemButton': 'addItem'
},
initialize: function(){
alert('initialize called in allitemview');
_.bindAll(this,'renderAllItem', 'addItem', 'appendItem');
this.collection = new ItemCollection();
this.collection.bind('add', this.appendItem); //Problem here
this.counter = 0;
this.renderAllItem();
},
renderAllItem: function(){
alert('renderallitem called in allitemview');
var self = this; //why
$(this.el).append('<button id="addItemButton"> Add Item </button>');
$(this.el).append('<ul></ul>');
_(this.collection.models).each(function(item){ //in case collection is not empty
self.appendItem(item);
},this); //what is this function
},
addItem: function(){
alert('addItem called in allitemview');
this.counter++;
var thisItem = new Item();
thisItem.item({ItemName:thisItem.get('ItemName')+this.counter
});
this.collection.add(thisItem); //add is a function defined for the collection
this.appendItem(thisItem);
},
appendItem: function(item){
alert("append item called in allItemview");
var itemView = new ItemView({
model: Item //DO NOT CAPITALIZE!!!... or do capitalize?...
});
$('ul',this.el).append(itemView.renderItem().el);
}
});
})(jQuery);
我认为您的目标是呈现某种层次结构。
首先:在appendItem函数中,itemView的模型不应该是model:item
而不是model:Item
。我看不到任何地方定义了Item。
接下来,为什么不使用?:http://backbonejs.org/#Collection-添加
appendItem似乎是多余的。您似乎还希望在更改集合后添加一个新视图。在这种情况下,您可能希望为集合或应用程序提供一个视图,将事件绑定到更改。这个问题可能会有所帮助?:Backbone.Collection.Create not triggering;添加";在视图
希望能有所帮助!
- jQuery的等价物's$(this)在Ractive.js事件代理中
- 书架JS:;this.hasOne“;不是函数
- 重复“;function(){}.调用(this)"在Uglified JS中
- 错误:this.setValues不是js代码中的函数,请使用googlemapapi
- ember.js计算属性中this的值是如何定义的
- Backbone.js和undercore.js将其绑定到this.collection.add
- $(this.el).find()在事件处理程序中工作,而不是在初始化函数(主干.js)中工作
- Use $.get() or this.model.save() (Backbone.js)
- JS this和self-don'不起作用
- webpack`this`没有指向窗口(Chart.js中断)
- this.collection.each不会以这种方式启动(backbone.js)
- $this->Js->object() 根据值自动对其内容进行排序
- 主干js this.model.get不是一个函数
- Google OAuth2 + Backbone + require.js = “this”绑定的问题
- Angular js: "this"内部ng-if函数
- Ember js this.set()破坏了引导插件
- 在回调中调用Js `this`上下文
- ApplicationRoute中的Ember.js this.set()不起作用
- 尝试从 js this 关键字中提取字符串
- 有人能帮我应用js 'this'关键字到迭代的jq选择表达式