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

我觉得不错。