Question

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

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

在我的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执行此操作也会非常冗长。

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]来推广转换器，但您仍然需要单独的绑定才能使用它。

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);
}

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

3 个答案: