Question

我有一个标题区域，我希望在初始标记中提供导航（因为搜索引擎优化）

    <header id="header-region">
        <ul id="menu">
            <li>frontpage</li>
            <li>about</li>
            <li>contact</li>
            <li>testing</li>
        </ul>
    </header>

然后我创建了一个木偶布局视图：

var MenuView = Backbone.Marionette.ItemView.extend({});
var menuView = new MenuView({
    el: '#menu'
}); 

App.headerRegion.attachView(menuView);

这完美无瑕，但后来我改变了headerRegion内容

App.headerRegion.show(anotherView);

然后想使用

切换回原来的mainView

App.headerRegion.show(menuView);

它尝试渲染menuView，但因为它没有“模板”它失败了，我可以以某种方式重用相同的视图实例而无需重新渲染它吗？或者是“Marionette方式”来重新初始化一个新的menuView？（我只是很好奇，如果我有一个相当复杂的视图，需要交换很多，每次重新渲染的视图可能非常昂贵）

Answer 1

当在Marionette中交换某个区域的内容时，该区域中显示的上一个视图将被关闭;并且您通常希望避免重复使用先前已关闭的视图。有很多绑定（事件和dom组件）会导致视图膨胀，你可能很难跟踪错误重用视图，因为其中一些绑定可能不会发生。

我遇到了一些像Switching views on regions loses the event bindings这样的自我。

Answer 2

调用App.headerRegion.show(anotherView);会转储标题区域的内容，并将其替换为anotherView的内容。当您尝试通过调用App.headerRegion.show(menuView)将区域恢复为以前的状态时，您所依赖的标记不再存在。

Backbone / Marionette方法是使用模板。 Marionette默认使用下划线模板，因此您只需在页面上包含以下内容：

<script type="text/template" id="menu">
    <ul>
        <li>frontpage</li>
        <li>about</li>
        <li>contact</li>
        <li>testing</li>
    </ul>
</script>

然后将您的MenuView定义为：

var menuView = new MenuView({
    template: '#menu'
});

木偶地区和现有dom的景色

2 个答案: