骨干视图属性哈希不更新

Question

希望我错过了一些简单的东西...我正在尝试做一些基本的事情,因为我希望视图的属性哈希在模型更改时自动更新.

如果你看一下属性:部分,你可以看到我是如何动态设置它们的.但是,它们似乎没有使用基础模型更改进行更新.

有任何想法吗？谢谢!

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'); }
    }
});

Answer 1

计算属性哈希的唯一时间是创建视图时,您需要自己做一些工作来更新它,这是一种方法,

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