Events 为视图的每个实例触发主干视图事件
A有一个父视图Events 为视图的每个实例触发主干视图事件,events,backbone.js,views,Events,Backbone.js,Views,A有一个父视图OpenOrderListView，该视图创建了包含事件的openorderview实例。我试图获得的结果是，当单击OpenOrderView的markCompleted按钮时，将调用一个函数来通知模型设置该属性 该功能正在工作，但正在父级（OpenOrderListView）中的所有OpenOrderView上调用它，而不仅仅是处理单击事件的视图。如何使此事件仅在所操作的视图上触发 代码如下 window.OpenOrderListView = Backbone.View.ext
OpenOrderListViewopenorderviewOpenOrderViewmarkCompletedwindow.OpenOrderListView = Backbone.View.extend({
el: 'table.openOrders tbody',
initialize: function() {
_.bindAll(this,'render');
this.render();
},
render : function() {
var $openOrders
var models = this.collection.open();
for (var i = models.length - 1; i >= 0; i--) {
console.log('model', models[i]);
console.log("this.template", this.template);
new OpenOrderView({'model': models[i], 'el': this.el});
};
}
});
window.OpenOrderView = Backbone.View.extend({
initialize: function() {
console.log('this', this);
_.bindAll(this,'render',
'markCompleted',
'markInProgress');
this.render();
},
events : {
"click .markCompleted": "markCompleted",
"click .markInProgress": "markInProgress",
},
markCompleted: function(){
console.log(this);
this.model.markCompleted();
},
markInProgress: function(){
console.log("markInProgress",this);
this.model.markInProgress();
console.log('markInProgress Complete');
},
template : 'template-openOrderView',
render : function() {
console.log("View Rendered");
$(this.el).append(tmpl(this.template, this.model.toJSON()));
}
window.Order = Backbone.Model.extend({
url: function(){
return "/api/order/id/"+this.get("id");
},
isCompleted: function(){
return this.get('status') == "completed";
},
isInProgress: function(){
return this.get('status') == "inProgress";
},
isOpen: function(){
return this.get('status') == "open";
},
markCompleted: function(){
this.set({'status':"completed"});
console.log('markCompleted');
return this.save();
},
markInProgress: function(){
this.set({'status':"inProgress"});
console.log('markInProgress');
return this.save();
},
markOpen: function(){
this.set({'status':"open"});
console.log('markOpen');
return this.save();
}
});
})
<tr class="order">
<td class="preview hide_mobile">
<a href="{%=o.api_url%}" title="{%=o.name%}" rel="gallery"><img src="{%=o.thumbnail_url%}"></a>
</td>
<td class="name">
<a href="{%=o.api_url%}" title="{%=o.name%}">{%=o.name%}</a>
</td>
<td class="description"><span>{%=o.description%}</span></td>
<td class="hide_mobile date_added"><span>{%=o.date_added%}</span></td>
<td class="hide_mobile user"><span>{%=o.username%}</span></td>
<td class="status">
<a class="btn modal-download" target="_blank" href="{%=o.url%}" title="{%=o.name%}" download="{%=o.name%}">
<i class="icon-download"></i>
<span>Download</span>
</a>
<button class="markCancel btn btn-danger" data-type="{%=o.delete_type%}" data-url="{%=o.delete_url%}">
<i class="icon-remove icon-white"></i>
<span>Cancel</span>
</button>
<button class="markInProgress btn btn-primary" data-type="" data-url="">
<i class="icon-repeat icon-white"></i>
<span>Mark In Progress</span>
</button>
<button class="markCompleted btn btn-success" data-type="" data-url="">
<i class="icon-ok icon-white"></i>
<span>Mark Completed</span>
</button>
</td>
{%=o.description%}
{%=o.date_added%}
{%=o.username%}
取消
标记进行中
标记完成
所有
子视图table.openOrders tbodyevents : {
"click .markCompleted": "markCompleted"
}
// code simplified an not tested
window.OpenOrderView = Backbone.View.extend({
tagName: 'tr',
attributes: { class: "order" },
initialize: function(){
// don't render() here
},
// ... rest of your code
render: function(){
this.$el.html(tmpl(this.template, this.model.toJSON()));
return this;
}
})
表.openOrders tbody.markCompletedclick子视图都有自己的这个.el
DOM元素
在您的情况下，我认为最好是您的子视图在空中创建自己的DOM元素，如下所示：
events : {
"click .markCompleted": "markCompleted"
}
// code simplified an not tested
window.OpenOrderView = Backbone.View.extend({
tagName: 'tr',
attributes: { class: "order" },
initialize: function(){
// don't render() here
},
// ... rest of your code
render: function(){
this.$el.html(tmpl(this.template, this.model.toJSON()));
return this;
}
})
请注意，现在子视图
没有呈现自身，也没有将其DOM元素直接附加到页面，这将是父视图
的作业：
// code simplified an not tested
window.OpenOrderListView = Backbone.View.extend({
render : function() {
var $openOrders
var models = this.collection.open();
for (var i = models.length - 1; i >= 0; i--) {
var openOrderView = new OpenOrderView({'model': models[i]});
this.$el.append( openOrderView.render().el );
};
});
我认为这是一种非常普遍的模式
PD：您必须修改模板，删除tr
打开/关闭。所有子视图都共享同一个DOM元素表。openOrders tbody
。这是在新的OpenOrderView（{'model'：models[i]，'el'：This.el}）行中完成的
因此，当您声明这样的事件时：
events : {
"click .markCompleted": "markCompleted"
}
// code simplified an not tested
window.OpenOrderView = Backbone.View.extend({
tagName: 'tr',
attributes: { class: "order" },
initialize: function(){
// don't render() here
},
// ... rest of your code
render: function(){
this.$el.html(tmpl(this.template, this.model.toJSON()));
return this;
}
})
发生的情况是，与此表.openOrders tbody.markCompleted
匹配的所有DOM元素都将与此click
事件绑定
您需要每个子视图都有自己的这个.el
DOM元素
在您的情况下，我认为最好是您的子视图在空中创建自己的DOM元素，如下所示：
events : {
"click .markCompleted": "markCompleted"
}
// code simplified an not tested
window.OpenOrderView = Backbone.View.extend({
tagName: 'tr',
attributes: { class: "order" },
initialize: function(){
// don't render() here
},
// ... rest of your code
render: function(){
this.$el.html(tmpl(this.template, this.model.toJSON()));
return this;
}
})
请注意，现在子视图
没有呈现自身，也没有将其DOM元素直接附加到页面，这将是父视图
的作业：
// code simplified an not tested
window.OpenOrderListView = Backbone.View.extend({
render : function() {
var $openOrders
var models = this.collection.open();
for (var i = models.length - 1; i >= 0; i--) {
var openOrderView = new OpenOrderView({'model': models[i]});
this.$el.append( openOrderView.render().el );
};
});
我认为这是一种非常普遍的模式
PD：您必须修改模板，删除打开/关闭的tr
。非常感谢。这帮助我更好地理解引擎盖下发生的事情！非常感谢你。这帮助我更好地理解引擎盖下发生的事情！