Backbone.js: Verschachteln von Ansichten durch Templating

Ist es technisch möglich, nest Aussicht, mit templating, sowas in der Art:

<%= new PhotoCollectionView({model:new PhotoCollection(model.similarPhotos)}).render().el) %>

Kann ich all die Sachen, die in der render-Methode als gut, aber templating gibt viel mehr Raum für Flexibilität und layout.

Ich habe versucht, die vorgenannte Variante, aber ich erhalte als Ergebnis auf dem Bildschirm ist [HTMLDivElement].

Wenn ich versuche, zu extrahieren, einfach den HTML-ouf ist es, mit Hilfe von jQuery in das HTML bekomme ich es gerendert ist, aber es stellt sich heraus, dass die DOM-nodes, get ausgedruckt unterscheiden sich von denen, die die Aussicht auf einen Verweis zu, weil keinerlei Interaktionen mit diesen DOM-Knoten ist es möglich, mit Hilfe der view-Instanz. Zum Beispiel, wenn in der Ansicht ich sagen $(this.el).hide()wird nichts passieren.

Was ist der richtige Weg, wenn überhaupt?

InformationsquelleAutor der Frage user802232 | 2011-08-18

  1. 30

    Ich normalerweise dazu, die übergeordneten Ansicht zuerst. Dann benutze ich die this.$('selector') Methode, um ein Kind finden, das element, das ich benutzen kann, als der el des Kindes anzeigen.

    Hier ist ein vollständiges Beispiel:

    var ChildView = Backbone.View.extend({
  //..
})

var ParentView = Backbone.View.extend({
  template: _.template($('#parent-template').html()),
  initialize: function() {
    _.bindAll(this, 'render');
  }
  render: function() {
    var child_view = new ChildView({ el: this.$('#child-el') }); //This refers to ParentView. 
    return this;
  }
});

var v = new ParentView();
v.render();

    InformationsquelleAutor der Antwort Skylar Anderson

  2. 12

    Akzeptierte Antwort hat eine große Schwachstelle, das ist die Tatsache, dass die ChildView wird re-initialisiert jedesmal, wenn Sie dargestellt werden. Dies bedeutet, dass Sie verlieren Staat und möglicherweise neu initialisiert kompliziert Ansichten auf jedem Rendern.

    Schrieb ich einen blog über dieses hier: http://codehustler.org/blog/rendering-nested-views-backbone-js/

    Zusammenzufassen, aber ich würde vorschlagen, so etwas wie dieses:

    var BaseView = Backbone.View.extend({

    //Other code here...

    renderNested: function( view, selector ) {
        var $element = ( selector instanceof $ ) ? selector : this.$el.find( selector );
        view.setElement( $element ).render();
    }
});

var CustomView = BaseView.extend({

    //Other code here...

    render: function() {
        this.$el.html( this.template() );
        this.renderNested( this.nestedView, ".selector" );
        return this;
    }
});

    Müssen Sie nicht verlängern, das Rückgrat anzeigen, wenn Sie nicht wollen, die renderNested-Methode eingesetzt werden könnte, wo Sie wollen.

    Mit dem code oben kannst du nun die Initialisierung des ChildView in der Initialisierungs-Methode und dann einfach Rendern, wenn render() aufgerufen wird.

    InformationsquelleAutor der Antwort Alessandro Giannone

  3. 2

    Check-out die Rückgrat.Untersichten mixin. Es ist eine minimalistische mixin gebaut, die für die Verwaltung verschachtelte Ansichten und nicht re-initialisieren Sie die untergeordneten Ansichten jedes mal, wenn der Elternteil erbracht wird.

    InformationsquelleAutor der Antwort Brave Dave

  4. 1

    Ich weiß nicht, über die innerhalb einer Vorlage selbst, aber ich habe es getan, mit Tabellen und Listen vor. In der äußeren Vorlage, habe einfach die stub:

    <script type="text/template" id="table-template">
    <table>
        <thead>
            <th>Column 1</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</script>

    und für die einzelnen Positionen:

    <%= Feld1 %>

    dann in Ihre Methode render, Rendern Sie einfach die einzelnen Elemente und fügen Sie diese in das tbody-element...

    InformationsquelleAutor der Antwort Bryce Fischer

  5. -1

    Die Entscheidung initialisiert ein neues Objekt jedes mal, wenn Sie das Rendern scheint mir sehr ineffizient.
    Besonders dieses:

    render: function() {
    var child_view = new ChildView({ el: this.$('#child-el') }); //This refers to ParentView. 
    return this;
  }

    Ideal die Darstellung der Eltern-sollte so etwas wie

    render: function() {
   this.$el.html(this.template());
   this.childView1.render();
   this.childView2.render();
}

    Und die Kinder der Schöpfung sollte nur geschehen, wenn die Initialisierung der Eltern:

    initialize: function() {
       this.childView1 = new ChildView1(selector1);
       this.childView2 = new ChildView2(selector2);
}

    das problem ist, dass wir nicht haben selector1 und selector2 vor dem Rendern der übergeordneten Vorlage. Dies ist, wo ich bin stecken geblieben in dem Moment 🙂

    InformationsquelleAutor der Antwort Andrey Petrov

Schreibe einen Kommentar