Klasse hinzufügen, um Elemente für die Werte des Attributs mit Rückgrat.ModelBinder

Ich bin mit Rückgrat.ModelBinder in einem Backbone.js Marionetten-Projekt. Ich habe ein Szenario, ich kann nicht herausfinden, wie zu verwenden, ModelBinder, um automatisch zu aktualisieren meine model/UI.

Mein Modell hat einen "status" string-Attribut, mit mehreren Staaten. In diesem Beispiel zeige ich den code für zwei: 'bald', 'someday'

In meinem UI habe ich eine Liste, auf die ich verwenden, klicken Sie auf Veranstaltungen um die Modell-status und update-Klassen markieren Sie den entsprechenden link in der Benutzeroberfläche. 

<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

Fühlt es sich wie ich tun dies zu einem langatmigen und langweiligen Weg! Den code aufblasen steigt mit der Zahl der Staaten, die ich brauche, zu unterstützen. Was ist der beste Weg, erreichen das gleiche Ergebnis mit ModelBinder?

InformationsquelleAutor Meirion | 2012-11-19
  1. 5

    Wahrscheinlich könnte man das der Einfachheit halber mit einem data-Attribut, so etwas wie dieses:

    <dd data-status="soon" class="set-status"><a>Soon</a></dd>
<dd data-status="someday" class="set-status active"><a>Someday</a></dd>

    dann:

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

    Müssen Sie möglicherweise nicht die set-status Klasse, einfach keying Dinge auf die <dd>s könnte ausreichend sein; ich bevorzuge die Trennung meiner event-handling von der nitty gritty element details, aber.

    InformationsquelleAutor mu is too short
  2. 1

    Leider, wird es ziemlich schwierig genau das zu tun, was Sie wollen mit ModelBinder. Der Hauptgrund dafür ist, dass ModelBinder zur Verfügung stellen will, den gleichen Wert für alle Elemente, die Teil der single-Auswahl. So tun Sie dies mit ModelBinder obwohl es möglich ist, wird Recht ausführlich auch.

    Den cleanup-angeboten von mu ist wahrscheinlich besser, als zu versuchen, zu verwenden ModelBinder. 1) weil Sie eine click-handler zu tun, die this.model.set egal was und 2) müssten Sie individuelle Bindungen für ModelBinder da der Konverter-Funktion wird aufgerufen, einmal für einen einzigen Selektor und dann der Wert eingestellt, auf der alle passenden Elemente (anstatt einer Schleife durch jedes).

    Aber wenn Sie wollen, um zu versuchen und etwas zu tun mit ModelBinder es würde in etwa so Aussehen:

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

    Diese würde tun, was Sie wollen. Natürlich ist die Kehrseite, wie ich oben sagte, ist, dass Sie brauchen mehrere Selektor-Bindungen. Man könnte das verallgemeinern-Konverter mit this.boundEls[0] aber Sie müssen noch die verschiedenen Bindungen für Sie zu arbeiten.

    InformationsquelleAutor Andrew Hubbs
  3. 0

    In Fall, dass Sie wollen, um Zugriff auf das gebundene element ist es möglich, zu erklären, 'html' als elAttrbute, ändern Sie das element und gibt die html-Konverter-Funktion:

    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);
}
    InformationsquelleAutor user2139950
Schreibe einen Kommentar