2

可以说我得到了这个观点：

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

我有 this.$elements 对象，它将在那里包含我的 DOM 的所有对象，我如何在它们上放置事件，因为使用此解决方案它们是可变的。这就是我以前做的事情（参见backbone.org）。

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

2 回答 2

8

与手动使用 jQuery 在渲染期间将事件绑定到子元素相比，使用delegateEvents提供了许多优势。所有附加的回调在传递给 jQuery 之前都绑定到视图，所以当回调被调用时， this 继续引用视图对象。当再次运行 delegateEvents 时，可能使用不同的事件哈希，所有回调都将被删除并重新委托 - 对于在不同模式下需要表现不同的视图很有用。

示例代码：

initialiaze: function () {
  // …
  this.events = this.events || {};
  // dynamically build event key
  var eventKey = 'click ' + '#sign-in-email';
  this.events[eventKey] = 'clickedSignInEmail';
  this.delegateEvents();
  // …
}
于 2012-12-07T11:40:54.793 回答
1

使用普通的 jQuery 事件处理语法怎么样？

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

您还可以使用Backbone.View.delegateEvents方法，但这需要您从选择器构造事件哈希。

于 2012-12-07T11:33:33.947 回答