木偶，如何即时更改视图的模板答案

【问题标题】：Marionette, how to change view's template on fly木偶，如何即时更改视图的模板
【发布时间】：2013-07-02 01:58:12
【问题描述】：

我正在用 Marionette 和 RequireJs 做一个单页 webApp，基本上它是一个嵌套了很多 ItemView 和 CompositeView 的 Layout 视图。我希望通过一键将页面更改为新设计，因此我想询问有关更改视图模板的最佳实践。

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

所以，有什么建议吗？

【问题讨论】：

标签： requirejs marionette requirejs-text

【解决方案1】：

据我所知，听起来您想根据不同的情况更改视图上的模板。 Marionette 的 ItemView 有一个 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();
});

【讨论】：