backbone.js: gniazdowania poglądy poprzez szablonów

Question

czy to technicznie możliwe do poglądów gniazdo, przy użyciu templating, coś takiego:

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

mogę umieścić wszystkie rzeczy w sposobie renderowania jak również, ale daje wiele szablonów więcej miejsca na elastyczność i układ.

Próbowałem wyżej wymieniony wariant, ale wszystko, co otrzymuję w wyniku na ekranie jest [HTMLDivElement].

Jeśli próbuję wyodrębnić z niego kod HTML, używając kodu HTML jQuery, otrzymam go renderowany, ale okazuje się, że węzły DOM, które zostaną wydrukowane, różnią się od tych, do których widoki odwołują się, ponieważ żadna interakcja z tymi węzłami DOM nie jest możliwa za pomocą instancji widoku. Na przykład, jeśli w widoku mówię: $(this.el).hide(), nic się nie stanie.

Jaki jest właściwy sposób postępowania, jeśli taki istnieje?

Answer 1

Zwykle najpierw renderuję widok rodzica. Następnie używam metody this.$('selector'), aby znaleźć element potomny, którego mogę użyć jako el widoku podrzędnego.

Oto pełny przykład:

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

Nie wiem o samym szablonie, ale robiłem to wcześniej z tabelami i listami. W zewnętrznej szablonu, wystarczy niedopałek:

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

i dla poszczególnych elementów: <% = pole1%>

następnie w swojej metody Render, podobnie czynią poszczególne elementy i dołączyć je do elementu tbody ...

Answer 3

Decyzja zainicjować nowy obiekt za każdym razem czynią wydaje mi się bardzo nieefektywne. Szczególnie to:

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

Idealnie Rendering rodzica powinno być coś jak

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

A stworzenie dzieciom powinno się zdarzyć tylko przy inicjalizacji dominującej:

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

Problem polega że nie mamy selektora1 i selektora2 przed renderowaniem szablonu nadrzędnego. Właśnie tam utknąłem w tej chwili :)

Answer 4

Przyjęta odpowiedź ma poważną wadę, co oznacza, że ​​ChildView ma być ponownie inicjowany za każdym razem, gdy jest renderowany. Oznacza to, że utracisz stan i potencjalnie będziesz musiał ponownie zainicjować skomplikowane widoki każdego renderowania.

pisałem bloga na ten temat tutaj: http://codehustler.org/blog/rendering-nested-views-backbone-js/

Podsumowując jednak, chciałbym zaproponować za pomocą czegoś takiego:

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

Nie trzeba rozszerzyć widok Backbone jeśli nie chcesz, metodę renderNested można umieścić w dowolnym miejscu.

Za pomocą powyższego kodu można teraz zainicjować funkcję ChildView w metodzie inicjalizacji, a następnie renderować ją po wywołaniu metody render().

Answer 5

Sprawdź mieszankę Backbone.Subviews. Jest to minimalistyczny mixin stworzony do zarządzania widokami zagnieżdżonymi i nie reinicjalizuje widoków potomnych za każdym razem, gdy rodzic jest renderowany.