使用 Backbone.ModelBinder 向元素添加属性值的类

Question

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

我的模型有一个 'status' 字符串属性，有多个状态。 在这个例子中，我将展示两个代码：'soon', 'someday'

在我的 UI 中，我有一个列表，我在该列表上使用单击事件来设置模型状态，并更新类以突出显示 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>上键入内容就足够了； 不过，我更喜欢将我的事件处理与细节元素细节分开。

Answer 2

不幸的是，使用ModelBinder完全做到你想要的将是非常困难的。 主要原因是ModelBinder希望为属于单个选择器的所有元素提供相同的值。 因此，使用ModelBinder执行此ModelBinder虽然可能，但也会非常冗长。

mu 提供的清理可能比尝试使用ModelBinder更好。 1) 因为this.model.set您都需要一个点击处理程序来执行this.model.set和 2) 您需要为ModelBinder单独绑定，因为转换器函数为单个选择器调用一次，然后在所有匹配元素上设置该值（而不是遍历每个）。

但是如果你真的想尝试用ModelBinder做一些事情，它看起来像这样：

  onRender : function () {
    var converter = function (direction, value) { 
      return (value == "soon" ? "active" : "");
    };
    var bindings = {
      status : {selector : "#status-soon", elAttribute : "class", converter : converter}
    };
    this.modelBinder.bind(this.model, this.el, bindings);
  }

这会做你想做的。 当然，正如我上面所说的，不利的一面是您将需要多个选择器绑定。 您可以使用this.boundEls[0]来概括转换器，但您仍然需要单独的绑定才能使其工作。

Answer 3

如果您想访问绑定元素，可以将 'html' 声明为 elAttrbute，修改元素并使用转换器函数返回其 html：

onRender : function () {
  var converter = function (direction, value, attribute, model, els) {
    return $(els[0]).toggleClass('active', value === 'soon').html();
  };
  var bindings = {
    status : {
      selector : "#status-soon", 
      elAttribute : "html", 
      converter : converter
    }
  };
  this.modelBinder.bind(this.model, this.el, bindings);
}