How to notify the view when I change the value of a property or delete from the list?

I need to create a model that contains css properties for one element. My model looks like this:

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

How to notify the view when I change the value of a property or delete from the list? (For example, if the user set border-width to 3px or when removing font-weight . Or is this the best solution not to store the properties in a hash and to establish that each property is an element in the model?)

+3
source share
2 answers

The trunk will not recognize the settings in your hash, on its own. But you can create methods that handle this for you:


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.

+7

All Articles