使用 Backbone.ModelBinder 将类添加到元素的属性值答案

【问题标题】：Add class to elements for values of attribute with Backbone.ModelBinder使用 Backbone.ModelBinder 将类添加到元素的属性值
【发布时间】：2012-11-06 22:47:27
【问题描述】：

我在 Backbone.js Marionette 项目中使用 Backbone.ModelBinder。我有一个场景，我不知道如何使用 ModelBinder 自动更新我的模型/UI。

我的模型有一个“状态”字符串属性，有多个状态。在这个例子中，我将展示两个代码：'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 实现相同结果的最佳方法是什么？

【问题讨论】：

标签： backbone.js model-binding marionette model-binders

【解决方案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 上键入内容就足够了；不过，我更喜欢将我的事件处理与细节的元素细节分开。

【讨论】：

【解决方案2】：

不幸的是，使用ModelBinder 完全按照您的意愿行事将非常困难。主要原因是ModelBinder 希望为属于单个选择器的所有元素提供相同的值。因此，尽管可能，使用 ModelBinder 执行此操作也会非常冗长。

mu 提供的清理可能比尝试使用ModelBinder 更好。 1) 因为无论如何你都需要一个点击处理程序来执行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] 概括转换器，但您仍然需要单独的绑定才能使其工作。

【讨论】：

【解决方案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);
}

【讨论】：