Backbone stickit - 使用类名和限定的“this”绑定

Posted 2023-02-24

【中文标题】Backbone stickit - 使用类名和限定的“this”绑定

【英文标题】：Backbone stickit - bind using class names and qualified "this"

【发布时间】：2014-08-05 06:56:05

【问题描述】：

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

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

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

【参考方案1】：

我实际上绑定到表单元素上的 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">

【讨论】：

+1 感谢您分享您的特定布线/管道实施。这有帮助！但是，如果您处理的不是表单元素，而是 span 或 h2 或 img 怎么办？

我在文档:el (selector) 中找到了以下内容（绑定到视图委托 (view.$el) 的特殊选择器值）-nytimes.github.io/backbone.stickit/#bindings/el-selector。所以也许你可以做以下:el .your-selector？让我知道这是否有效。很好奇。我在家的时候也会看看源代码。