Div-Wrap für Backbone.Marionette.ItemView deaktivieren

2014/02/18 — aktualisiert werden, um Platz für die Verbesserungen, die bereits von @vaughan und @Thom-Nichols in den Kommentaren

In vielen meiner itemView/layouts ich dies tun:

var Layout = Backbone.Marionette.Layout.extend({

    ...

    onRender: function () {
        //Get rid of that pesky wrapping-div.
        //Assumes 1 child element present in template.
        this.$el = this.$el.children();
        //Unwrap the element to prevent infinitely 
        //nesting elements during re-render.
        this.$el.unwrap();
        this.setElement(this.$el);
    }

    ...

});

Der obige code funktioniert nur, wenn das wrapper-div-Element enthält ein einzelnes element, das ist, wie ich das design meines templates.

In Ihrem Fall .children() zurück <tr class="angry_cat">, so sollte dies funktionieren perfekt.

Ich bin damit einverstanden, es hält die Vorlagen viel sauberer.

Eine Sache zu beachten:

Diese Technik erfordert keine Kraft, nur 1 Kind-element. Blind packt .children() also, wenn du hast falsch gebaut, die Vorlage-zur Rückkehr von mehr als einem element, wie das erste template Beispiel mit 3 <td> Elemente, es wird nicht gut funktionieren.

Erfordert es, dass Ihre Vorlage ein einzelnes element zurückgeben, wie Sie in der zweiten Vorlage, mit der Wurzel <tr> element.

Natürlich könnte es geschrieben werden, um dies zu prüfen, wenn es sein muss.

Hier ist ein funktionierendes Beispiel für die neugierigen: http://codepen.io/somethingkindawierd/pen/txnpE

InformationsquelleAutor der Antwort bejonbee

Diese Lösung funktioniert für re-rendering. Sie überschreiben müssen render.

onRender tricks nicht für die Arbeit neu darstellen. Verursachen Sie nisten auf jedem neu Rendern.

BM.ItemView::render = ->
  @isClosed = false
  @triggerMethod "before:render", this
  @triggerMethod "item:before:render", this
  data = @serializeData()
  data = @mixinTemplateHelpers(data)
  template = @getTemplate()
  html = Marionette.Renderer.render(template, data)

  #@$el.html html
  $newEl = $ html
  @$el.replaceWith $newEl
  @setElement $newEl

  @bindUIElements()
  @triggerMethod "render", this
  @triggerMethod "item:rendered", this
  this

InformationsquelleAutor der Antwort vaughan

Für IE9+ Sie konnte einfach firstElementChild und childElementCount:

var Layout = Backbone.Marionette.LayoutView.extend({

  ...

  onRender: function () {
      if (this.el.childElementCount == 1) {
          this.setElement(this.el.firstElementChild);
      }
  }

  ...

});

Gibt es einen guten Grund, warum Marionette fügt automatisch die wrapper-DIV. Es ist nur, wenn Ihre Vorlage besteht aus nur einem element, wenn Sie es fallen. Damit der test für die Anzahl von untergeordneten Elementen.

Andere Möglichkeit ist die Verwendung des attachElContent Methode in jedem Marionette anzeigen. Seine default-Implementierung bedeutet re-rendert die Ansicht überschreiben, die das root-element, die innere HTML. Diese letztlich gibt Anlass zu der unendlichen Verschachtelung erwähnt in bejonbee Antwort.

Wenn Sie lieber nicht überschreiben onRender-und/oder erfordern eine Reine JS-Lösung, die folgende code könnte genau das sein, was Sie wollen:

var Layout = Backbone.Marionette.LayoutView.extend({

  ...

  attachElContent: function (html) {
      var parentEl = this.el.parentElement;
      var oldEl;

      //View already attached to the DOM => re-render case => prevents
      //recursive nesting by considering template's top element as the
      //view's when re-rendering
      if (parentEl) {
          oldEl = this.el;
          this.setElement(html);                   //gets new element from parsed html
          parentEl.replaceChild(this.el, oldEl);   //updates the dom with the new element 
          return this;

      //View hasn't been attached to the DOM yet => first render 
      //=> gets rid of wrapper DIV if only one child
      } else {
          Marionette.ItemView.prototype.attachElContent.call(this, html);
          if (this.el.childElementCount == 1) {
              this.setElement(this.el.firstElementChild);
          }
          return this;
      }
  }

  ...

});

Beachten Sie, dass für das re-Rendern zu arbeiten, die den code annimmt, dass Sie eine Vorlage mit einem einzigen Kind, das enthält alle markup-Symbole.

InformationsquelleAutor der Antwort hqcasanova