Backbone.js: vista nidificazione attraverso template

Question

E 'tecnicamente possibile viste nido, utilizzando template, qualcosa di simile:

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

posso mettere tutte le cose nel metodo di rendering, come pure, ma dà molto template più spazio per flessibilità e layout.

Ho provato la variante di cui sopra, ma tutto quello che ottengo di conseguenza sullo schermo è [HTMLDivElement].

Se provo a estrarre solo l'HTML fuori da esso, utilizzando l'HTML di jQuery, ottengo il rendering, ma risulta che i nodi DOM che vengono stampati sono diversi da quelli a cui le viste contengono un riferimento, perché nessuna interazione con quei nodi DOM è possibile usando l'istanza di visualizzazione. Ad esempio se all'interno della vista dico $(this.el).hide(), non accadrà nulla.

Qual è il modo corretto, se esiste?

Answer 1

In genere, viene visualizzata per prima la vista padre. Quindi utilizzo il metodo this.$('selector') per trovare un elemento figlio che posso utilizzare come el della visualizzazione figlio.

Ecco un esempio completo:

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

Answer 2

Non conosco all'interno di un modello stesso, ma l'ho già fatto con tabelle ed elenchi. Nel modello esterno, basta avere lo stub:

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

e per le singole voci: <% = field1%>

poi nel metodo di rendering, rendere le singole voci e li aggiunge all'elemento tbody ...

Answer 3

La decisione di inizializzare un nuovo oggetto ogni volta che si esegue il rendering a me sembra molto inefficiente. In particolare questo:

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

Idealmente, il rendering del genitore dovrebbe essere qualcosa di simile

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

E la creazione bambini deve avvenire solo quando l'inizializzazione del genitore:

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

il problema è che non abbiamo selector1 e selector2 prima di rendere il modello principale. Questo è il punto in cui sono bloccato in questo momento :)

Answer 4

La risposta accettata ha un grosso difetto, che è il fatto che ChildView verrà reinizializzato ogni volta che viene reso. Ciò significa che si perderà lo stato e potenzialmente sarà necessario reinizializzare le viste complicate su ciascun rendering.

ho scritto un blog su questo qui: http://codehustler.org/blog/rendering-nested-views-backbone-js/

In sintesi, però, vi suggerirei di usare qualcosa di simile:

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

Non è necessario estendere la vista Backbone se non lo fai vuoi, il metodo renderNested può essere messo ovunque tu voglia.

Con il codice sopra, è ora possibile inizializzare ChildView nel metodo di inizializzazione e quindi renderlo semplicemente quando viene chiamato il rendering().

Answer 5

Controllare il mixin Backbone.Subviews. È un mixin minimalista creato per gestire le viste nidificate e non reinizializza le viste secondarie ogni volta che viene eseguito il rendering del genitore.