[英]Backbone.js toggle a popover
可以插入另一个视图的简单弹出视图。 在创建时,它被引用到父视图的视图元素:
function(app) {
var Popover = app.module();
Popover.Views.Default = Backbone.View.extend({
className: 'popover',
initialize: function(options) {
this.reference = options.reference;
this.reference.bind('click', this.toggle());
this.render();
},
beforeRender: function() {
this.content = this.$el.find('.popover');
}
toggle: function() {
console.log('toggle');
}
});
// Required, return the module for AMD compliance.
return Popover;
});
引用是设置popover的元素,如:
Main.Views.Start = Backbone.View.extend({
template: "main/start",
serialize: function() {
return { model: this.model };
},
initialize: function() {
this.popover = new Popover.Views.Default({
reference: this.$el.find('.member')
});
this.listenTo(this.model, "change", this.render);
},
beforeRender: function(){
this.insertView(this.popover);
}
});
弹出窗口正确显示,但是当我点击a.member
没有任何反应。 此外,我注意到在页面刷新时触发了切换方法,并在日志中显示切换。 非常扼杀。 任何想法为什么会这样? 如何将父视图中的链接单击与弹出窗口的切换方法相关联?
当我记录参考时:
[prevObject: jQuery.fn.jQuery.init[1], context: undefined, selector: ".member", jquery: "2.0.0", constructor: function…]context: undefinedlength: 0prevObject: jQuery.fn.jQuery.init[1]selector: ".member"__proto__: Object[0]
您没有正确地将事件绑定到reference
,请尝试:
this.reference.bind('click', this.toggle);
在您创建popover
对象时, $el
不包含.member
元素,您的日志显示一个长度等于0的对象。确保在创建member
之后创建popover
,可能在render
方法之后。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.