2013-06-28 57 views
4

可以插入另一个视图的简单弹窗视图。上创建它被引用到父视图的视图元素:Backbone.js切换弹出窗口

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; 
}); 

基准是在其上酥料饼的将被设置像元件:然而,当

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] 

回答

1

你是不是正确的事件绑定到reference,尝试用:

this.reference.bind('click', this.toggle); 

目前正在创建的popover对象$el不包含.member元素,您的日志显示长度等于0的对象。确保您是创建popover后创建member,也许在render方法之后。

+0

嗯它不绑定,当我点击元素什么也没有发生 –

+0

@artworkadシ你从控制台得到东西吗? –

+0

这只是一个错字,我在我的问题中发布了参考日志 –