Question

让我说我有这个观点：

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

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

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

Answer 1

使用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();
  // …
}

Answer 2

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

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

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

Backbone js带有变量的动态事件

2 个答案: