2013-03-20 12 views
7

Próbuję dynamicznie manipulować itemViews w Collection Collection Marionette. Zbiory mają te same modele, ale zdefiniowałem argument templateName w modelach.Czy istnieje sposób na zmianę szablonu Marionetki ItemView dynamicznie z RequireJS?

Pytanie brzmi, czy mogę manipulować szablonem ItemView według tego argumentu?

ItemView:

define(['text!templates/ComponentItemViewTemplate.html','models/ComponentModel'], function (template, model) { 
    var ItemView = Backbone.Marionette.ItemView.extend({ 
     template: _.template(template), 
     model: model 
    }); 

    return ItemView; 
}); 

CollectionView:

define(['views/ComponentItemView', 'views/LoadingView'], function(ItemView, LoadingView) { 
    var ComponentListView = Backbone.Marionette.CollectionView.extend({ 
     emptyView : LoadingView, 
     id: "component-list", 
     itemView: ItemView, 
     events: { 
      'click .title span' : 'show' 
     }, 
     appendHtml: function(collectionView, itemView, index){//i would like to render different templates, for different models. 
      itemView.$el.draggable({ helper: "clone", cancel: ".component .title span", connectToSortable: ".ui-sortable" }); 
      collectionView.$el.append(itemView.el); 
     }, 
     show: function(r) { 
      var target = $(r.target); 
      if(target.parent().hasClass('open')){ 
       target.parent().removeClass('open'); 
       target.parent().next().slideDown('fast'); 
      }else{ 
       target.parent().addClass('open'); 
       target.parent().next().slideUp('fast'); 
      } 
     } 
    }); 

    return ComponentListView; 
}); 

Dzięki!

+2

Przypisałbym nazwę szablonu w ItemView, z funkcją 'getTemplate'. https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#change-which-template-is-rendered-for-a-view –

+0

Czy jest jakiś sposób na renderowanie itemview po pobraniu szablonu przez requirejs? Cose z twoim rozwiązaniem dostaję błąd, zanim szablon będzie wymagany. 'getTemplate: function() {require (['text! Szablony /' + this.model.get ('editor_template') + '.html'], function (Template) {return _.template (Template);});} ' –

Odpowiedz

24

Można nadpisać funkcję getTemplate i zapisać tam swoją logikę. Marionette documentation recommends Następująca opcja:

MyView = Backbone.Marionette.ItemView.extend({ 
    getTemplate: function(){ 
    if (this.model.get("foo")){ 
     return "#some-template"; 
    } else { 
     return "#a-different-template"; 
    } 
    } 
}); 
6

Myślę, że gumballhead jest na dobrej drodze. W tym celu można zastąpić funkcję getTemplate.


MyCollectionView = Marionette.CollectionView.extend({ 

    // ... 

    getItemView: function(item){ 
    // get the template from the item... or wherever else it comes from 
    return new MyViewType({ 
     template: item.get("the-template") 
    }); 
    } 


}); 

nadzieja, że ​​robi to, co trzeba

2

Przede wszystkim chciałbym podziękować dla wszystkich, którzy próbowali mi pomóc. Rozwiązałem mój własny problem. Oto sollution, jeśli ktoś to potrzebne:

define(['models/ComponentModel'], function (model) { 

    var ItemView = Backbone.Marionette.ItemView.extend({ 
     model: model, 
     render: function() { 
      var that = this; 
      var data = this.serializeData(); 

      require(['text!templates/components/editor/' + that.model.get('editor_template') + '.html'], function(Template){ 
       var html = _.template(Template, data); 
       that.$el.html(html); 
      }); 
     } 
    }); 

    return ItemView; 
}); 

edycja: (Lepsza sollution)

sugestie są mile widziane!