Backbone.js: imbrication des vues à travers les templates

Est-il techniquement possible d'imbriquer des points de vue, à l'aide de gabarits, de quelque chose comme ça:

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

Je peux mettre tous les trucs dans la méthode render, mais templating donne beaucoup plus de place à la souplesse et à la mise en page.

J'ai essayé de ladite variante, mais tout ce que j'obtiens comme résultat sur l'écran est [HTMLDivElement].

Si j'essaie d'extraire juste le HTML sur ouf, à l'aide de jQuery HTML, je l'ai rendu, mais il s'avère que les nœuds DOM, qui est imprimée sont différentes de celles que les points de vue de tenir une référence, car aucune interaction que ce soit avec ces nœuds est possible à l'aide de l'instance de vue. Par exemple, si dans la vue, je dis $(this.el).hide(), rien ne se passera.

Quelle est la bonne façon, si?

  • Je ne suis pas sûr de savoir si cette technique est techniquement possible ou pas, mais je vous recommande contre elle, en tant que modèles doivent uniquement contenir des instructions conditionnelles et non pas toute la logique de l'application. La logique de l'application doit rester dans vos Vues. De cette façon, il est évident que la séparation des préoccupations et votre demande sera plus facile à gérer.
  • vous pouvez imbriquer des points de vue à l'aide de React.js
InformationsquelleAutor user802232 | 2011-08-18
  1. 29

    En général, je le rendu de la vue parent en premier. J'utilise ensuite la this.$('selector') méthode pour rechercher un élément enfant que je peux utiliser comme el de la vue enfant.

    Voici un exemple complet:

    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();
    • eh bien, oui ... j'ai fini par faire la même
    • Cela semble un peu inefficace. Vous êtes à la ré-initialisation de la vue enfant à chaque fois que le parent est rendu.
    • D'accord avec Alessandro. En plus d'être inefficace, vous aussi lâche dynamique de l'état de l'enfant vues à chaque fois de la vue parente est rendu. Découvrez Dorsale.Les sous-vues de prêt-à-utiliser de solution minimaliste
    • Vous devez créer la vue enfant dans initialiser, et l'enregistrer comme une propriété de la vue parent. Appelez ensuite rendu sur la vue enfant à l'intérieur de la mère de la fonction rendu.
    InformationsquelleAutor Skylar Anderson
  2. 14

    La accepté de répondre a un défaut majeur, qui est le fait que le ChildView va être ré-initialisées à chaque fois qu'il est rendu. Cela signifie que vous allez perdre de l'etat et éventuellement avoir à ré-initialisé compliqué points de vue sur chaque rendu.

    J'ai écrit un blog à ce sujet ici: http://codehustler.org/blog/rendering-nested-views-backbone-js/

    Pour résumer, si, je vous recommande d'utiliser quelque chose comme ceci:

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

    Vous n'avez pas besoin d'étendre l'épine Dorsale de la vue si vous ne le souhaitez pas, le renderNested méthode pourrait être mis n'importe où vous le souhaitez.

    Avec le code ci-dessus, vous pouvez maintenant procéder à l'initialisation ChildView dans l'initialisation de la méthode et puis tout simplement le rendre quand render() est appelée.

    InformationsquelleAutor Alessandro Giannone
  3. 2

    Découvrez la De la colonne vertébrale.Les sous-vues mixin. C'est un minimaliste mixin construit pour la gestion des vues imbriquées et de ne pas re-initialiser l'enfant vues à chaque fois que le parent est rendu.

    InformationsquelleAutor Brave Dave
  4. 1

    Je ne sais pas à propos de dans les un modèle elle-même, mais je l'ai fait avec des tableaux et des listes avant le. Dans le modèle externe, juste le stub:

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

    et pour chacun des articles:

    <%= champ1 %>

    puis dans votre méthode de rendu, juste rendre les éléments individuels et les ajouter à l'élément tbody...

    InformationsquelleAutor Bryce Fischer
  5. -1

    La décision d'initialiser un nouvel objet à chaque fois que vous effectuez le rendu me semble très inefficace.
    En particulier ceci:

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

    Idéalement, le Rendu de la mère doit être quelque chose comme

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

    Et les enfants création devrait se produire que lors de l'initialisation de la mère:

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

    le problème est que nous n'avons pas selector1 et selector2 avant de rendre le modèle parent. C'est là que je suis bloqué à droite maintenant 🙂

    • Ce qui semble ne pas vraiment répondre à la question, bien que le conseiller semble raisonnable. Assurez-vous de réellement répondre à la question!
    InformationsquelleAutor Andrey Petrov