Марионетка, как изменить шаблон представления на лету
Я делаю одностраничное webApp с Marionette и RequireJs, в основном это представление Layout, вложенное в множество ItemView и композитный вид. Я хочу, чтобы страница изменилась на новый дизайн одним щелчком мыши, поэтому я хочу спросить передовую практику по изменению шаблона представления.
скажем, у меня такое представление, и его шаблоны включены в текстовый плагин requirejs:
define([
'text!templates/designNo1/template.html'
], function(template) {
var MyView = Backbone.Marionette.ItemView.extend({
/*Template*/
template: template,
initialize: function() {
......
},
onRender: function() {
......
}
});
return SkillView;
});
каждый вид и их подпредставления определяются следующим образом. и их шаблоны, расположенные в папке "template/designNo1". теперь я получил набор нового дизайна, расположенный в "template/designNo2", и я хочу применить его к странице, но я обнаружил, что у меня нет шансов сделать это, потому что представления уже загружены RequireJs и путь к шаблону труден -coded. конечно, я могу переопределить шаблон представления при создании экземпляра представления, но если я это сделаю, я должен загрузить весь новый дизайн в верхний модуль, который создает экземпляр, который выглядит плохо, и новый дизайн продолжает появляться, скоро будет беспорядок.
так что, какой-нибудь совет?
1 ответ
Из того, что я могу сказать, похоже, что вы хотите изменить шаблон представления в зависимости от различных обстоятельств. ItemView Marionette имеет функцию getTemplate(), которая вызывается при ее рендеринге. Вы можете указать функцию, которая определяет, какой шаблон отрисовывать оттуда.
Другой подход может состоять в том, чтобы просто изменить шаблон представления и повторно отрендерить его. Вы можете сделать это на событии клика легко:
HTML
<div class="content"></div>
<button class="btn">Change Template</button>
Javascript
var template1 = '<div>Template 1</div>';
var template2 = '<div>Template 2</div>';
var ItemView = Backbone.Marionette.ItemView.extend({
template: template1
});
var itemView = new ItemView({ el: '.content' });
itemView.render();
$('.btn').click(function(e) {
e.preventDefault();
itemView.template = template2;
itemView.render();
});