如何使用Backbone.js設置模型的動態屬性

故事：我有很多需要設置的屬性。由於他們有相似之處，我選擇將inputbox作爲屬性名稱的一部分讀出該類。如何使用Backbone.js設置模型的動態屬性

問題：可以設置對象的動態屬性，就像關聯數組一樣。所以我可以做

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);

那麼我將如何處理這個問題？

我有可以設置的ALOT（200+）屬性，我不想爲每個屬性設置單獨的eventlisteners，除非這是唯一的方法。

代碼：

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);

來源

2012-03-09 Jareish

你想，當他們改變從HTML元素的值傳播到骨幹模型？ – 2012-03-09 20:12:56

用戶將填寫輸入框或使用滑塊。當兩者的值改變時，我需要通過讀出DOM id來識別他所改變的200個輸入中的哪一個。使用inputbox/slider和DOM id $（e.currentTarget）.parents（'div'），attr（'id'）的值，我更新了模型，它將更新其他觀看這個模型的更改事件的視圖。 – Jareish 2012-03-09 20:21:33

我不知道我完全理解你的問題，但：如果要更新的屬性，只是：

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

如果你想要的設置不會觸發事件，你可以通過一個沉默的選項，像這樣：

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

我希望它可以幫助你。

修訂：

另一種方式：

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

來源

2012-03-09 20:09:51 Aito

該屬性將被稱爲customattribute。例如 var customattribute =「test」; this.model.set（{customattribute：12}）; 如果您嘗試獲取值： this.model.get（「customattribute」）;如果你嘗試 this.model.get（「test」）; 你會得到未定義的，而不是12 – Jareish 2012-03-09 20:15:00

使用關聯數組，你可以做你想做的。我更新了一個例子。同樣，如果您不想發起事件，請通過選項：silent：true。 – Aito 2012-03-09 20:22:45

你需要這樣做

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

如果屬性是「試驗」和值 'value' 這將是相同的as

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

這就是正確地設置屬性，並傳播到視圖由於

來源

2012-03-09 20:26:44

作爲Backbone 0.9.0 (Jan. 30, 2012)模型改變事件，model.set（source）接受鍵，一個值和選項對象。

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

相當於

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

來源

2016-11-07 22:11:23

如何使用Backbone.js設置模型的動態屬性

回答

相關問題