2013-07-02 64 views
2

希望我失去了一些簡單的東西......我試圖做一些基本的事情,我希望視圖的屬性哈希在模型更改時自動更新。骨幹查看屬性哈希不更新

如果你看看屬性:部分,你可以看到我試圖動態設置它們。但是,他們似乎沒有更新基礎模型更改。

任何想法?謝謝!

NS.CP.ColorView = Backbone.View.extend({ 
    initialize: function(){ 
     _.bindAll(this); 
     this.model.bind('change', this.render); 
    }, 
    attributes: function(){ 
     return { 
      'class': (this.model.get('active') == 'true') ? 'active' : '', 
      'data-code': this.model.get('modifier'), 
      'data-hex': this.model.get('color'), 
      'data-image': this.model.get('image'), 
      'data-match': this.model.get('matchBody'), 
      'style': 'background-color: ' + this.model.get('color') 
     }; 
    }, 
    events: { 
     'click': 'renderFrame', 
     'activate': 'activate', 
     'deactivate': 'deactivate' 
    }, 
    tagName: 'li', 
    render: function(){ 

     console.log(this); 

     var $el = this.$el; 

     if(this.model.get('active') == 'true' && $el.closest('.model_colorpicker').hasClass('body-colors')){ 

      // Change border color on click 
      $('.color-frame').css('border-color', $el.data('hex')); 
     } 

     return this.el; 
    }, 
    activate: function(){ 
     this.model.set('active', 'true'); 
    }, 
    deactivate: function(){ 
     this.model.set('active', 'false'); 
    }, 
    renderFrame: function(){ 
     if(!this.$el.hasClass('active')){ this.$el.trigger('activate').siblings().trigger('deactivate'); } 
     else { this.$el.trigger('deactivate'); } 
    } 
}); 

回答

6

計算的屬性哈希唯一的一次是在創建視圖的時候,你需要做一些工作,自己去更新它,這裏是一個辦法,

initialize : function(){ 
    this.listenTo(this.model, 'change', this.modelChange); 
}, 
modelChange : function(){ 
    this.$el.attr(_.extend({}, _.result(this, 'attributes'))); 
} 
+0

正是我一直在尋找爲 - 謝謝你! – probablyup