Марионетка, как изменить шаблон представления на лету

Я делаю одностраничное 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();
});
Другие вопросы по тегам