Javascript 更新元素';从模板生成元素时进行渲染
我想知道这是最佳实践还是缺少一种动态修改元素类的简单方法:Javascript 更新元素';从模板生成元素时进行渲染,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我想知道这是最佳实践还是缺少一种动态修改元素类的简单方法: define(function () { 'use strict'; var NextButtonView = Backbone.View.extend({ className: 'disabled halfGradient', template: _.template($('#nextButtonTemplate').html()), attributes: fu
define(function () {
'use strict';
var NextButtonView = Backbone.View.extend({
className: 'disabled halfGradient',
template: _.template($('#nextButtonTemplate').html()),
attributes: function() {
return {
id: 'NextButton',
title: chrome.i18n.getMessage("skipNextVideo")
};
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass('disabled', !this.model.get('enabled'));
return this;
},
initialize: function () {
this.listenTo(this.model, 'change:enabled', this.render);
}
});
return NextButtonView;
});
其中我的模板是:
<script type="text/template" id="nextButtonTemplate">
<svg width="16px" height="16px">
<rect class="path" x="14" y="3" width="2" height="10" fill="gray" />
<path class="path" d="M0,3 L7,8 L0,13z" fill="gray" />
<path class="path" d="M7,3 L14,8, L7,13z" fill="gray" />
</svg>
</script>
是否有一种更“隐式”的方式根据模型的状态设置类?我看不出您的设置有什么问题,但您也可以执行以下操作:
className: function() {
return 'halfGradient' + ( this.model.get('enabled') ? '' : ' disabled');
},
//...
我觉得不错。