Zusätzliche divs in itemviews und layouts im Rückgrat.Marionette

Ich versuche aus Rückgrat.Marionette, und ich bin verwirrt, warum meine Layouts und ItemViews halten generieren zusätzliche divs.

Beispiel in Kaffee btw.

AppLayout = Backbone.Marionette.Layout.extend
  template: "#my-layout",

  regions:
    menu: "#menu",
    content: "#content"

MyMenuView = Backbone.Marionette.ItemView.extend
  template: '#project_wiz_nav_template'

MyContentView = Backbone.Marionette.ItemView.extend
  template: '#project_setup_template'

MyApp = new Backbone.Marionette.Application()

MyApp.addRegions
  mainRegion: '#project'

MyApp.addInitializer ->
  layout = new AppLayout()
  MyApp.mainRegion.show(layout)

  layout.menu.show(new MyMenuView())
  layout.content.show(new MyContentView())

MyApp.start()

Dies ist, was index.html enthält:

<div id='project'></div>
<script type='text/template' id='project_wiz_nav_template'> <h2>HI</h2> </script>
<script type='text/template' id='project_setup_template'> <h2>WORLD</h2> </script>
<script id="my-layout" type="text/template">
  <h2>Hello!</h2>
  <div id="menu"></div>
  <div id="content"></div>
</script>

Dies ist, was es produziert:

<div id="project">
  <div>
    <h2>Hello!</h2>
    <div id="menu">
      <div> 
        <h2>HI</h2> 
      </div>
    </div>
    <div id="content">
      <div> 
        <h2>WORLD</h2> 
      </div>
    </div>
  </div>
</div>

Wie Sie sehen können, hält Sie generieren zusätzliche divs für die Ansichten und layouts. Ich habe versucht, indem el: '#menu' und el: '#content' ohne Erfolg.

InformationsquelleAutor corroded | 2012-06-25
  1. 8

    Dies ist nicht, weil der Marionette. Rückgrat erzeugt eine <div> Klasse für Sie standardmäßig. Sie können die tag über die tagName Attribut. Siehe Kommentare auf die Frage nach den Duplikaten dieser.

    • Vielen Dank für Ihre Antwort zu diesem Derick. Ich bin zu schlagen, die gleiche Sache-ich würde gerne die Ansicht der el zu sein, der Selektor definiert die Layout-Regionen-hash. Wie es scheint, die definition der Sicht die tag-kommt aus zwei Richtungen: aus dem layout und aus der region ist der Ansicht, dass keine Möglichkeit zum überspringen einer intermediate-tag.
    • Haben Sie jemals herauszufinden, einen Weg, um das zusätzliche <div> Verhalten bei der Anzeige von Regionen?
    • Bailey, Ist es sowieso für Tres Kommentar zu arbeiten? Ich habe schon Stunden und wäre viel einfacher, mit zu arbeiten
    • Es kann getan werden, über das überschreiben open Methode der Region - eine einzeilige Funktion, die macht $.append der Ansicht el Regionen el', so if remake in way that it will do append(view.$el.html())` statt - es wird das problem lösen.
    • Bailey, zeigen wir eine ItemView zu einer region, die bereits ein div-element. Warum also brauchen wir die zusätzlichen verschachtelten div? Gibt es dafür irgendeinen Grund?
    • das ist Rückgrat.Ansicht Verhalten, nicht Marionette Verhalten. Bitte suchen Sie StackOverflow und die vielen blogs da draußen für die info auf dieser.
    • Okay, ja, es ist Rückgrat.Ansicht Verhalten. Aber wir verwenden Marionette Regionen zu VERBESSERN normalen Rückgrat.Blick. Dieses Verhalten ist einfach nur unintuitiv und macht Regionen weniger nützlich.
    • Ich denke, das ist das, was @GillBates suggeriert - github.com/marionettejs/backbone.marionette/blob/master/docs/...
    • Sie können onRender trigger, in der Sie Ansichten zu tun this.setElement(this.$el.find('selector'));. Die einzige Sache ist, dass Sie wahrscheinlich benötigen, um erstellen Sie eine Basisklasse für Ihre ItemView oder/und LayoutView...
    • tatsächlich Marionette konnte es lösen, indem übergeben $el: dies.getRegionEl implizit. aber er tut es nicht Weg.

    InformationsquelleAutor Derick Bailey
  2. -1

    Einen hacky workaround, aber jQuery nächsten() tatsächlich den job für mich. Anstatt über den zurückgegebenen myView.el direkt, ich bin mit $(myView.el).closest("div").html() -- wie ich sagte, hacky, aber als Kurzfristige Lösung, es funktioniert.

    Ich war basteln mit diesem tutorial: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/comment-page-1/#comment-3801, die eine geschachtelte Modell und schafft ein Akkordeon-Ansicht mit Bootstrap. Ich wollte das gleiche tun mit seinem Ausgangspunkt, nur mit der jQueryUI accordion-widget, das ist der Grund, ich brauchte ein aufgeklappter Ansicht kommen zurück-daher auch der Filterung mit der nächsten().

    Andere als die Zugabe der jqueryUI links und ändern Sie den zurückgegebenen HTML-Code, wie oben abgegrenzt, es funktioniert ziemlich gut: http://dartsleague.parentleafarm.com/superheroes/

    InformationsquelleAutor Snowmonkey
  3. -3

    Geben Sie Ihre el-Eigenschaft. Ich denke, dass es fix:

    http://documentcloud.github.com/backbone/#View-el

    • ich versuchte dies und bekam eine Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3. Ich denke, das könnte mehr einer marionette, was in Bezug auf ItemView, aber ich bin mir nicht sicher...
    • dieser Fehler kommt von jQuery. es bedeutet, dass Sie versuchen, fügen Sie ein DOM-element in einem unzulässigen Ort. Zum Beispiel, versuchen Sie möglicherweise, fügen Sie ein <tr> tag in einem <ul> tag, das ist nicht gültig.
    • Ich habe eine wirklich harte Zeit mit diesem Problem zu. Vor der 2.x update die Angabe der el-Eigenschaft funktioniert. Das upgrade bricht dieses also bin ich verwirrt, wenn Sie sagen, es ist ein JQuery-Problem. Wie funktioniert es in 1.x dann? Ich habe ein Register-Steuerelement, das aufgehört hat zu funktionieren mit der 2.x update, weil ich bin nicht in der Lage zu generieren, die DOM-Struktur von JQuery will. Was hat sich geändert im update zu machen unter Angabe der el-Eigenschaft nicht mehr funktioniert?
    InformationsquelleAutor Rimian
Schreibe einen Kommentar