2012-12-07 94 views
2

可以说,我得到了这样的观点:。骨干JS动态事件与变量

var HomeView = Backbone.View.extend({ 
    el: '#application', 
    initialize: function() { 
     this.template = template; // Comes from requireJS (not relevant) 
     this.$elements = {}; 
    }, 
    render: function() { 
     this.$el.html(this.template); 

     this.$elements = { 
      signIn: { 
       email: $('#sign-in-email'), 
       password: $('#sign-in-password') 
      } 
     }; 

     // Demonstration. 
     this.$elements.signIn.email.myPluginInit(); 
     this.$elements.signIn.password.myPluginInit(); 

     // 
     // NOTE: How to handle the events? 
     // 
    } 
}); 

我有这个$元素对象,其中将包含我的DOM存在的所有对象,我怎样才能把事件对他们因为采用这种解决方案它们是可变的这是我以前做的事(参见backbone.org)。

var HomeView = Backbone.View.extend({ 
    events: { 
    'click #sign-in-email': 'clickedSignInEmail', 
    'focus #sign-in-password': 'focusSignInPassword' 
    } 
}); 
+1

听起来像是你应该有不同的视图结构,你会使用不同的子视图取决于什么部件,你需要在页面上。然后,您的登录事件将绑定到一个子视图,并且您不会有可变事件。 –

回答

1

如何使用jQuery的正常事件处理的语法?

this.$elements.signIn.email.click(this.clickedSignInEmail); 
this.$elements.signIn.password.focus(this.focusSignInPassword); 

您还可以使用Backbone.View.delegateEvents方法,但是这需要你从你选择构建事件哈希值。

+0

它的工作原理,但这将成为很多代码,因为this.clickedSignInEmail不工作,将取代“clickedSignInEmail”函数中的“this”值,所以我必须做“this。$ elements.signInEmail.click (function(){self.clickedSignIn;})“ – onlineracoon

+0

你可以在'initialize'中强制绑定上下文:'_.bindAll(this);' – jevakallio

8

使用delegateEvents提供手动 使用jQuery绑定期间呈现事件的子元素在若干优点。所有 附加的回调被绑定到视图之前被切换到 jQuery,所以当调用回调时,这继续引用 的视图对象。当delegateEvents再次运行时,可能使用不同的事件散列,所有回调将被删除并重新授权 - 对于需要在不同的 模式下行为不同的视图很有用。

示例代码:

initialiaze: function() { 
    // … 
    this.events = this.events || {}; 
    // dynamically build event key 
    var eventKey = 'click ' + '#sign-in-email'; 
    this.events[eventKey] = 'clickedSignInEmail'; 
    this.delegateEvents(); 
    // … 
} 
+1

更好的克隆事件,然后在initialize ):'this.events = _.clone(this.events)| {}'。否则,如果你定义了它,你会改变全局事件对象。这不是很酷,并且有时会导致错误的附加事件触发。 – HighCat

+1

但是'this.events'将特定于视图实例,然后它就是你想要做的 - 你不希望每个对象都有自己的'events'属性,你想要改变原型。 –

+1

好的。在我个人的情况下,我确实需要为每个视图实例提供自己的“事件”。但是从'initialize'内部改变原型并不奇怪吗? – HighCat