Как перенести подвиды жизненный цикл обязанности марионеток

Question

ВопросКак перенести подвиды жизненный цикл обязанностей от MyView к Marionette? (См код ниже)

Проблема здесь состоит в том, что items массив формируется динамически на сервере, и я не хочу, чтобы перебирать их в MyView. Нужно ли мне Marionette.CollectionView?

Код:

У меня есть my-view.hbs шаблон:

{{#each items}} 
    <button class="button">name</button> 
    <div name="target"/> <!-- each target div should contain a subview --> 
{{/each}} 

И вид, который делает это:

var MyView = Marionette.LayoutView.extend({ 
    template: Templates['my-view.hbs'], 

    render: function() { 
    var items = [ //actually they come from server 
     {name: 'car'}, 
     {name: 'bike'}, 
     {name: 'skiboard'}, 
    ]; 
    this.$el.html(
     this.template({ items: items }) 
    ); 
    this.renderSubViews(); 
    return this; 
    }, 
    /** 
    * It creates, renders and append subViews manually. 
    * TODO: move responsibilities to Marionette 
    */ 
    renderSubViews: function() { 
    var self = this; 
    self.subViews = []; 
    self.$('div[name=target]').each(function(index, subViewContainer) { 
     var subView = new SubView(); 
     self.subViews.add(subView); 
     subView.render(); 
     $(subViewContainer).append(subView.$el); 
    }); 
    } 
}); 

Answer 1

Если короткий, да, вам нужно Composite или Collection Просмотр. Также я рекомендую вам использовать Коллекцию вместо обычного объекта, это поможет вам сделать проще связь между данными (модель), и вы просмотров:

var ItemModel = Backbone.Model.extend({ 
     defaults: { 
      name: 'unnamed' 
     } 
    }), 
    ItemsCollection = Backbone.Collection.extend({ 
     model: ItemModel 
    }), 

    MyChildView = Marionette.ItemView.extend({ 
     template: Templates['my-view.hbs'] 
    }), 
    MyView = Marionette.CollectionView.extend({ 
     childView: MyChildView, 
     collection: new ItemsCollection([ 
      {name: 'car'}, 
      {name: 'bike'}, 
      {name: 'skiboard'} 
     ]) 
    }); 

также ваш шаблон будет проще:

<button class="button">name</button> 
<div name="target"/>