Backbone的文档说明:
events属性也可以定义为返回事件哈希的函数,以便以编程方式定义事件,并从父视图继承它们.
你如何继承父视图事件并扩展它们?
var ParentView = Backbone.View.extend({
events: {
'click': 'onclick'
}
});
Run Code Online (Sandbox Code Playgroud)
var ChildView = ParentView.extend({
events: function(){
????
}
});
Run Code Online (Sandbox Code Playgroud) 我试图了解他们在Backbone 0.9.9中所做的新变化.
目前,我有问题理解之间的区别listenTo和on:
listenTo
var View = Backbone.View.extend({
tagName: "div",
intialize: function() {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
this.$el.empty();
this.$el.append('<p>hello world</p>');
}
});
Run Code Online (Sandbox Code Playgroud)
上
var View = Backbone.View.extend({
tagName: "div",
intialize: function() {
this.model.on('change', this.render, this);
},
render: function() {
this.$el.empty();
this.$el.append('<p>hello world</p>');
}
});
Run Code Online (Sandbox Code Playgroud)
我听说listenTo允许stopListening取消订阅所有事件,例如删除视图以避免内存泄漏.
这是唯一的原因吗?
在我的简单项目中,我有2个视图 - 订单项视图(品牌)和应用.我有附加功能,允许选择多个项目:
var BrandView = Backbone.View.extend({
...some code...
toggle_select: function() {
this.model.selected = !this.model.selected;
if(this.model.selected) $(this.el).addClass('selected');
else $(this.el).removeClass('selected');
return this;
}
});
var AppView = Backbone.View.extend({
...some code...
delete_selected: function() {
_.each(Brands.selected(), function(model){
model.delete_selected();
});
return false;
},
});
事实是,我想知道选择了多少项.在此设置中,选择不会影响模型,因此不会触发任何事件.从MVC概念来看,我理解视图不应该与其他视图直接对话.那么AppView如何知道BrandViews中正在选择某些内容?
更具体地说,我AppView知道选择了多少项,所以如果选择了多于1个,我会显示一个菜单供多个选择.
我有超级视图谁负责渲染子视图.当我重新渲染的超视图中的所有事件的子视图都将丢失.
这是一个例子:
var SubView = Backbone.View.extend({
events: {
"click": "click"
},
click: function(){
console.log( "click!" );
},
render: function(){
this.$el.html( "click me" );
return this;
}
});
var Composer = Backbone.View.extend({
initialize: function(){
this.subView = new SubView();
},
render: function(){
this.$el.html( this.subView.render().el );
}
});
var composer = new Composer({el: $('#composer')});
composer.render();
Run Code Online (Sandbox Code Playgroud)
当我点击click me div时,会触发事件.如果我composer.render()再次执行,所有内容看起来都很相似,但不会再触发click事件.
检查工作jsFiddle.
任何人都可以解释一下backbone.js中的delegateEvents是什么吗?文档没有帮助我理解.
我确切的用例是:
我有一个带有内部视图Y的主视图X.它们工作得很好,但如果我转到主视图Z然后返回到X(重用,而不是重新创建),那么附加到Y子元素的事件就会丢失.delegateEvents解决了这个问题,但我想了解原因.
我想知道是否有可能在一条线路内绑定主干中的多个事件类型.
考虑以下:
var MyView = Backbone.View.extend({
id: 'foo',
events: {
'click .bar': 'doSomething',
'touchstart .bar': 'doSomething'
},
doSomething: function(e) {
console.log(e.type);
}
});
Run Code Online (Sandbox Code Playgroud)
基本上我想知道的是,是否可以将'click'和'touchstart'的事件绑定组合成一行 - 沿着以下行:
events: { 'click,touchstart .bar': 'doSomething' }
Run Code Online (Sandbox Code Playgroud)
任何建议,将不胜感激.
当我{"silent":true}在Backbone模型中设置属性时通过时,为什么不仅仅抑制change:attribute事件?下次更改属性时触发该事件的优点是什么?
更新
Backbone 0.9.10改变了传递的行为{ "silent": true }.来自更改日志:
传递
{silent:true}变化将不再拖延个人"变化:attr"事件,而是完全沉默.
在此处浏览更改日志
我可以将处理程序附加到Backbone Views,如:
var TodoView = Backbone.View.extend({
events: {
"xxx": "eventHandler1"
"yyy": "eventHandler2"
}
});
Run Code Online (Sandbox Code Playgroud)
但是如果我想在同一个事件中附加多个处理程序呢?
var TodoView = Backbone.View.extend({
events: {
"xxx": "eventHandler1"
"yyy": "eventHandler2"
"xxx": "eventHandler3" // this isn't valid ... at least in CoffeeScript
}
});
Run Code Online (Sandbox Code Playgroud)
我可以创建一个自定义处理程序
function compositeXXX() { eventHandler1(); eventHandler2 }
Run Code Online (Sandbox Code Playgroud)
但这似乎并不理想......
我有以下代码,我将更改绑定到单个属性"attribute_1".
var Mine = Backbone.Model.extend({
initialize: function() {
this.bind("change:attribute_1", function() {
console.log('changed!');
});
}
});
Run Code Online (Sandbox Code Playgroud)
如何绑定两个属性?这不起作用:
var Mine = Backbone.Model.extend({
initialize: function() {
this.bind("change:attribute_1, change:attribute_2", function() {
console.log('changed!');
});
}
});
Run Code Online (Sandbox Code Playgroud)
这也不是:
var Mine = Backbone.Model.extend({
initialize: function() {
this.bind("change:attribute_1 change:attribute_2", function() {
console.log('changed!');
});
}
});
Run Code Online (Sandbox Code Playgroud) 我有一个简单的问题.我正在寻找一个包含2行代码的函数:
deleteTask: function() {
this.parent.collection.remove(this.model);
this.model.destroy();
}
Run Code Online (Sandbox Code Playgroud)
如果我注释掉第一行,它应该从其集合中删除模型,那么事情似乎按预期工作(如同,模型被自动删除).从Backbone的网站上,这是模型"破坏"功能的相关描述:
触发模型上的"销毁"事件,该事件将通过包含它的任何集合冒泡.
我可以安全地假设删除this.parent.collection.remove(this.model);不会以任何方式影响代码的功能吗?这是我的想法,但我想确保它.
谢谢!