backbone.js - 当我更改某些属性的值或从列表中删除时如何通知 View ？

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) {}
...}

当我更改某些属性的值或从列表中删除时如何通知 View ？ (例如，当用户将 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")它会触发您在 View 中绑定(bind)的三个“更改”事件。

在 View 中，您可以在初始化程序中绑定(bind)更改事件，并让 jQuery 将所有样式应用于 View 控制的 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模型中的事件，并让 View 通过删除有问题的 css 属性来响应该事件。