1

我正在设计一个 SaaS 应用程序，并已被定向到 Backbone.js。该服务部分跟踪 DOM 事件，例如每个事件发生了多少，然后根据此信息应用分数。

将数据解耦为模型和集合非常吸引人，但在我深入研究之前，我想问问它是否是适合这项工作的工具。

我想使用以站点所有者页面的 HTML 编写的现有 DOM 元素，而不是创建 JavaScript 模板。因此，我将跟踪现有元素上的 DOM 事件，然后更新数据模型。使用该服务的站点所有者将能够使用模型中的数据来创建他们自己的视图并根据他们的需要呈现他们自己的模板。

我知道我将需要使用 Backbone.View 来跟踪事件，从我目前所读的内容来看，Backbone 似乎可以灵活地允许这样做。但是，在我对 Backbone 的研究中，我还没有看到任何用于跟踪多个表单元素上的一系列事件的示例。

以这段代码为例：

App.Models.Event = Backbone.Model.extend({
    defaults: {
        clicks: 0,
        dblClicks: 0,
        tabs: 0,
        kbdFunctions: 0
    },

    urlRoot: 'events'
});

App.Views.Event = Backbone.View.extend({
    model: new App.Models.Event(),

    events: {
        'click input' : 'clickCount',
        'dblclick input' : 'dblClickCount',
        'tabEvent input' : 'tabCount',
        'kbdEvent input' : 'kbdEventCount'
    },

    initialize: function () {
        this.el = $('[data-transaction=start]');
    },

    clickCount: function (e) {
        console.log('click counted');
    },

    dblClickCount: function (e) {
        console.log('double click counted');
    },

    tabCount: function (e) {
        console.log('tab counted');
    },

    kbdEventCount: function (e) {
        console.log('keyboard event counted');
    }
});

我希望能够跟踪单击、双击、选项卡和其他自定义键盘事件，这些事件发生在input, textarea,select选项上并且button包含在[data-transaction=start]元素中。首先，这是否适用于 Backbone，其次，如果是，那么在 Backbone.View 事件对象文字中添加多个元素的最佳方法是什么？我在文档或其他任何地方都没有看到任何这样的例子，但如果我可以在其中添加一个变量会很好：

...
var someVariable = input, textarea, select, button;

events: {
    'click someVariable' : 'clickCount',
    ...
4

1 回答 1

1

事件由 Backbone 使用delegateEvents视图中的方法分配。此方法在您的视图初始化方法（代码参考）之后调用

所以你可以在视图构造函数中传递你的变量

myView = new App.Views.Events ( someVariable )

在您的初始化方法中，您可以分配事件：

initialize: function(someVariable) {
    //assign this.events from someVariable as you would like

}

编辑：

只需阅读 Backbone 文档：

events属性也可以定义为返回事件哈希的函数，以便更容易以编程方式定义事件，以及从父视图继承它们。

于 2013-04-02T14:32:52.273 回答