Question

我正在使用Marionette和RequireJs进行单页webApp，基本上它是一个嵌套有大量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加载了，模板的路径很难-coded。当然，我可以在创建视图的实例时覆盖视图的模板，但是如果我这样做，我必须在创建实例的上层模块中加载所有新设计，看起来很糟糕，并且新设计会不断出现，很快就会变得一团糟。

那么，有什么建议吗？

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

木偶，如何在飞行中更改视图的模板

1 个答案: