使用Backbone.ModelBinder将类添加到元素的值中

Question

我在Backbone.js Marionette项目中使用Backbone.ModelBinder.我有一个场景,我无法弄清楚如何使用ModelBinder自动更新我的模型/ UI.

我的模型有一个'status'字符串属性,有多个状态.在这个例子中,我将展示两个代码:'很快','某天'

在我的UI中,我有一个列表,我使用click事件来设置模型状态,并更新类以突出显示UI中的相关链接.

<dd id="status-soon"><a>Soon</a></dd>
<dd id="status-someday" class="active"><a>Someday</a></dd>

events: {
    'click #status-soon': 'setStatusSoon',
    'click #status-someday': 'setStatusSomeday'
},
setStatusSoon: function () {
    this.model.set('status', 'soon');
    this.$el.find('.status dd').removeClass('active');
    this.$el.find('#status-soon').addClass('active');
},
... etc

感觉就像我这样做是一个冗长而笨重的方式!代码膨胀随着我需要支持的状态数量而增加.使用ModelBinder获得相同结果的最佳方法是什么？

Answer 1

您可以使用数据属性简化操作,如下所示:

<dd data-status="soon" class="set-status"><a>Soon</a></dd>
<dd data-status="someday" class="set-status active"><a>Someday</a></dd>

然后:

events: {
    'click .set-status': 'setStatus'
},
setStatus: function(ev) {
    var $target = $(ev.target);
    var status  = $target.data('status');
    this.model.set('status', status);
    this.$el.find('.status dd.set-status').removeClass('active');
    $target.addClass('active');
}

你可能不需要这个set-status课程,只需在<dd>s 上键入内容就足够了; 我更喜欢将事件处理与细节元素细节分开.