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

1 回答 1

7

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

initialize : function(){
  this.listenTo(this.model, 'change', this.modelChange);
},
modelChange : function(){
  this.$el.attr(_.extend({}, _.result(this, 'attributes')));
}
于 2013-07-02T21:49:09.867 回答