如何在更改某些属性的值或从列表中删除时通知视图？

Question

我需要创建一个包含一个元素的css属性的模型.我的模型看起来像这样:

StyleModel = Backbone.Model.extend( {
    defaults : {
        productName : '',
        styles:{
            'font-weight':'normal',
            'font-style':'normal',
            'text-decoration':'none',
            'visibility':'visible'
            'color':'blue',
            'border-width':'1px',
            'border-color':'white',
            'font-color':'white'
        }
    },
    initialize : function(property, values) {}
...}

如何在更改某些属性的值或从列表中删除时通知视图？(例如,当用户将border-width设置为3px或删除font-weight时.或者更好的解决方案是不保留哈希属性并将每个属性设置为模型中的元素？)

Answer 1

Backbone无法识别哈希中的设置.但您可以创建为您处理此问题的方法:

Backbone.Model.extend({
  setCss: function(key, value){
    var css = this.get("styles");
    css[key] = value;
    this.trigger("change", this, key, value);
    this.trigger("change:css", key, value);
    this.trigger("change:css:" + key, value);
  }
});

然后你会打电话model.setCss("background-color", "#ff0faf"),它会触发三个"更改"事件,你可以在你的视图中绑定.

在视图中,您可以在初始化程序中绑定更改事件,并让jQuery将所有样式应用于视图控制的DOM元素:

Backbone.View.extend({
  initialize: function(){
    this.model.on("change:css", this.setCss, this);
  },

  setCss: function(){
    var css = this.model.get("styles");
    this.$el.setCss(css);
  }
});

您可能需要在应用新集之前清除现有的css,以确保删除任何已删除的内容.但是,更有可能的是,您需要deleteCss在模型上使用方法,让它css:deleted从模型中引发事件,并让视图通过删除有问题的css属性来响应该事件.