0

stickit我经常发现自己为jQuery target提供了某种命名约定,以一对一ID的方式some-aggregate-individual-element-{#number}将每个与相应的集合元素配对。ID这是为了确保stickit只会更新有View问题的特定视图,而不是其他类似的聚合视图。

如果您能以某种方式告诉“根”节点在其下执行更新,那么似乎应该有一种方法可以ID为此目的使用类名而不是 s 。stickit例如,如果我定义 aView并且我说bindings: { ".individual-title": { observe: "Title" } }stickit知道该Title属性来自,this.model因此不需要限定。但是,每当我将相同的逻辑应用于左侧时,都会stickit对文档上具有该类名的所有节点执行更新,而不仅仅是那些位于 下的节点,我的视图的根节点在this.$el哪里。$el

有没有内置的或其他简单的方法来实现这一点,这样我就可以停止id使用愚蠢的命名约定来处理我的所有元素?或者这是你应该做的?

4

1 回答 1

2

我实际上绑定到表单元素上的 name 属性,因此消除了 id 和类名的使用。例如,假设我有以下模型。

User.Model = Backbone.Model.extend({
    defaults: {
        firstname: null,
        lastname: null,
        phone: null,
        personemail: null
    }
});

然后我创建以下助手:

// Create default binding therefore eliminating repetition
Backbone.View.prototype.createDefaultBindings = function() {
    var k, v, _ref, _results;
    this._bindings = {};
    _ref = this.model.toJSON();
    _results = [];
    for (k in _ref) {
        v = _ref[k];
        _results.push(this._bindings['input[name="' + k +'"]'] = { observe: k });
    }
    return _results;
};

// Helper to overide bindings in our view
Backbone.View.prototype.mergeBindings = function() {
    if (this.model) {
        this.createDefaultBindings();
    }
    _.extend(this._bindings, this.bindings);
    this.bindings = this._bindings;
};

那么我们可以有如下视图:

User.Views.Form = Backbone.View.extend({
    initialize: function(options) {
        this.mergeBindings();
    },

    render: function() {
        this.stickit();
    }
});

初始化我们的视图

var view = new User.Views.Form({ model: new User.Model() })

然后它将使用以下输入绑定到您的模板:

<input name="firstname" type="text">
<input name="lastname" type="text">
<input name="phone" type="text">
<input name="email" type="text">
于 2014-08-05T08:55:55.180 回答