3

我需要创建一个模型来保存一个元素的 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) {}
...}

当我更改某些属性的值或从列表中删除时如何通知视图？（例如，当用户将边框宽度设置为3px或删除font-weight时。或者不将属性保存在哈希中并将每个属性设置为模型中的元素是更好的解决方案吗？）

4

2 回答 2

7

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 属性来响应该事件。

于 2012-04-20T11:44:10.467 回答
1

使用模型http://documentcloud.github.com/backbone/#Model-change上可用的更改事件

让您的视图绑定到事件。http://documentcloud.github.com/backbone/#Events-on

于 2012-04-20T11:36:51.193 回答