を使用するチュートリアルで問題が発生しています
this.collection.bind('add',appendItem)
と
this.collection.bind('add',appendSet)
appendItem は、ビューのコレクションの backbone.js ビュー内で定義された関数です。appendSetについても同じ問題は、モデルをネストしてチュートリアルを拡張したいということですが、アイテムを追加するときに、上記の行を使用すると、appendItemとappendSetをadd関数にバインドしたため、add関数が勝ちましたこれがどうあるべきかわかりません。
( bind が何をするかについての簡単なリマインダー: http://underscorejs.org/#bind )
では、どうすればまだ使用できますか
this.collection.add(thisItem)
それでもバインディングの問題を回避します。要するに: this.collection.add(thisItem) を呼び出して、キーワード「this」が bind 関数を使用せずに appendItem を参照することになっていることを add 関数に伝える方法はありますか?
リクエストがあれば自分のコードを含めることもできますが、少し長くて扱いにくく、役に立たない可能性が高いと思いました。
編集：
私のコードのロジックはこれです。アイテムは、いくつかの属性とそれに関連付けられたセットのコレクションを持つモデルです。私はちょうどチュートリアルに従っており、彼がこれらのオブジェクトをレンダリングする方法は、this.collection.add('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);