如何使用 Backbone.js 在模型上设置动态属性答案

【问题标题】：How to set a dynamic property on a model with Backbone.js如何使用 Backbone.js 在模型上设置动态属性
【发布时间】：2012-03-09 20:05:41
【问题描述】：

故事：我有很多需要设置的属性。由于它们有相似之处，我选择读出输入框所属的类作为属性名称。

问题：可以设置对象的动态属性，就像关联数组一样。所以我可以做

var customattribute = this.$el.parents('div').attr('id');
var value = $(e.currentTarget()).val();

this.model.attributes[customattribute] = value;

但这不会触发模型的更改事件。我可以手动触发更改事件，但这不会更新 this.model.changedAttributes()，我只需要设置更改的属性，而不是每个属性。

这当然也不行：

this.model.set(customattribute: value);

那么我该如何处理这个问题呢？

我有很多（200 多个）可以设置的属性，我不想为每个属性创建单独的事件监听器，除非那是唯一的方法。

代码：

var Display = Backbone.View.extend({
    className: 'display',
    events: {
        'slide .slider' : 'sliderHandler'
    },
    initialize: function(){
        _.bindAll(this, 'render', 'sliderHandler','update');
        this.model.on('change',this.update, this);
    },
    render: function(){
        this.$el.html(_.template(html, {}));
        this.$('.slider').slider();

        return this;
    },
    sliderHandler: function(e){
        var slider = $(e.currentTarget);
        var property = slider.parents('div').attr('id');
        var value = slider.slider('value');

        this.model.attributes[property] = value;            
    },
    update: function(){
        console.log(this.model.changedAttributes());
        //get changed attribute + value here

    },
});

编辑：

下面的两个答案解决了它。将属性映射到对象并将其提供给 Backbone。我还找到了另一个解决方案。除了对象，model.set() 还接受一个数组。

model.set(customattribute, value, customattribute2, value2);

【问题讨论】：

当它们发生变化时，您是否尝试将值从 HTML 元素传播到主干模型？
用户将填写输入框或使用滑块。当其中任何一个的值发生变化时，我需要通过读出 DOM id 来确定他更改了 200 个输入中的哪一个。使用 inputbox/slider 的值和 DOM id $(e.currentTarget).parents('div').attr('id')，我更新模型，这将更新侦听此模型的更改事件的其他视图.

标签： javascript arrays object backbone.js

【解决方案1】：

我不确定我是否完全理解您的问题，但是：如果要更新属性，只需：

this.model.set({
     customattribute: value
});

如果您希望该设置不触发事件，您可以传递一个静默选项，如下所示：

this.model.set({
     customattribute: value
}, {silent:true});

希望对你有帮助。

更新：

另一种方式：

 var map = {};
 map[customattribute] = value;
 this.model.set(map);

【讨论】：

该属性将被称为 customattribute。例如 var customattribute = "test"; this.model.set({customattribute: 12});如果您尝试获取该值： this.model.get("customattribute");如果你试试 this.model.get("test"); 你会得到 12你会得到未定义的，而不是 12
使用关联数组，你可以做你想做的事。我更新是为了给你一个例子。同样，如果您不想触发事件，请传递选项：silent:true。

【解决方案2】：

你需要这样做

var attributeName = this.$el.parents('div').attr('id');
var value = $(e.currentTarget()).val();
var attribute = {};
attribute[attributeName] = value;
this.model.set(attribute);

如果属性是“测试”并且值是“值”，那么它将与

this.model.set({test: 'value'});

这是正确设置属性并通过模型更改事件传播到您的视图

【讨论】：

【解决方案3】：

截至Backbone 0.9.0 (Jan. 30, 2012)，model.set (source) 接受 key、value 和 options 对象。

this.model.set(attributeName, value, { silent: true });

等价于

var attr = {};
attr[attributeName] = value;
this.model.set(attr, { silent: true });

【讨论】：