2

うまくいけば、単純なものが欠けています...モデルが変更されたときにビューの属性ハッシュを自動的に更新するという点で、基本的なことをしようとしています。

attributes:セクションを見ると、動的に設定しようとしていることがわかります。ただし、基になるモデルの変更で更新されていないようです。

何か案は?ありがとうございました!

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