1

我在 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 实现相同结果的最佳方法是什么？

4

3 回答 3

5

您可能可以使用数据属性简化事情，如下所示：

<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课程，只需在 s 上键入内容就<dd>足够了；不过，我更喜欢将我的事件处理与细节的元素细节分开。

于 2012-11-19T02:46:14.000 回答
1

不幸的是，要完全按照您的意愿使用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]但您仍然需要单独的绑定才能使其工作。

于 2012-11-19T03:51:36.183 回答
0

如果您想访问绑定的元素，可以将 '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);
}
于 2016-08-08T09:52:45.607 回答