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