Backbone Templating Ansätze Unterschiede

Question

Ich würde gerne über Backbone Templating Ansätze verstehen. Ich verwende Marionette, um mit CollectionViews zu arbeiten.

Was ist der Unterschied, dies zu tun ist:

// This approach is working fine. 

<script type="text/template" id="single-item"> 
    <li><strong><%= userName %></strong></li> 
</script> 

Statt dessen:

<ul> 
    each(Loop into each collection item) : 
     <li><%= item.property %></li> 
    endEach; 
</ul> 

Answer 1

Die Marionette Collection eine Ansicht Instanz pro Auflistelement machen. So haben Sie die vollständige Kontrolle über den Artikel.

Angenommen, Sie möchten Benutzer mit einer einzigen Ansicht auflisten, die die gesamte Liste verarbeitet. Es würde wie folgt aussehen:

var UserList = Backbone.View.extend({ 
    template: _.template($('#user-list-template').html()), 
    render: function(){ 
     this.$el.html(this.template({ users: this.collection.toJSON() })); 
     return this; 
    } 
}); 

Und die Vorlage

<script type="text/template" id="user-list-template"> 
    <ul> 
    <% _.each(users, function(user) { %> 
     <li><%= user.email %></li> 
    <% }) %> 
    </ul> 
</script> 

Es ist super einfach und sieht von dort gut.

Aber dann möchten Sie eine Bearbeitungsschaltfläche für jeden Benutzer in der Liste hinzufügen. Es beginnt das eigentliche Problem mit dem obigen Ansatz. Sie müssten raten, auf welches Element geklickt wurde, oder die Benutzer-ID in ein -Attribut in der Vorlage einfügen. All das saugt.

Mit der CollectionView können Sie leicht damit umgehen und alles ist in seiner alleinigen Verantwortung.

einen Artikel Ansicht Marke:

var UserListItem = Marionette.View.extend({ 
    template: _.template($('#user-list-item-template').html()), 
    events: { 
     'click @ui.edit': 'onEdit', 
    }, 
    ui: { 
     edit: '.edit-btn' 
    }, 
    onEdit: function(e) { 
     this.model.id; // the user model directly accessible 
    } 
}); 

Mit einer super einfachen Vorlage.

<script type="text/template" id="user-list-item-template"> 
    <li><%= user.email %> <button type="button" class="edit-btn">edit</button></li> 
</script> 

Dann verwenden Sie es in Ihrer Listenansicht.

var UserList = Marionette.CollectionView.extend({ 
    tagName: 'ul', 
    childView: UserListItem 
}); 

Danach ist das Hinzufügen von Funktionen zu Ihrer Artikelansicht wirklich einfach. Es ist sogar in verschiedenen Listen wiederverwendbar, da die Liste und der Artikel entkoppelt sind.