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