Requirejs 木偶，如何更改视图'；正在运行的模板

我正在使用木偶和RequireJs制作一个单页Web应用程序，基本上它是一个嵌套了大量ItemView和compositeView的布局视图。我希望通过单击将页面更改为新设计，因此我想询问有关更改视图模板的最佳实践

比如说，我的视图是这样的，它的模板包含在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加载，模板的路径是硬编码的。当然，我可以在创建视图的实例时覆盖视图的模板，但如果我这样做，我必须在创建实例的上层模块中加载所有新设计，这看起来很糟糕，新设计不断出现，很快就会变得一团糟

---

那么，有什么建议吗？

据我所知，您似乎想根据不同的情况更改视图上的模板。木偶的ItemView有一个在渲染时调用的函数。您可以指定一个函数，用于确定要从中渲染的模板

另一种方法可能是简单地更改视图的模板并重新渲染它。您可以轻松地在单击事件中执行此操作：

HTML

更改模板

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();
});

var template1='template1'；
var template2='template2'；
var ItemView=Backbone.marionete.ItemView.extend({
模板：模板1
});
var itemView=newitemview（{el:'.content'}）；
render（）；
$（'.btn'）。单击（函数（e）{
e、 预防默认值（）；
itemView.template=template2；
render（）；
});

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();
});