4

我是 Backbone.js 和 Backbone.Marionette 的新手，我在尝试为我的应用程序遵循最佳模式时遇到了一些麻烦。

我正在创建一个由 PhoneGap 封装的移动 Web 应用程序。我有一个通用布局（类似 Facebook）：2 个侧边栏、一个主标题和一个加载所有视图的内容区域。

我的 Backbone.Marionette 应用程序的初始化代码是：

var App = new Backbone.Marionette.Application();

App.addRegions({
    leftRegion: '#left-drawer',
    rightRegion: '#right-drawer',
    headerRegion: '#header',
    contentRegion: '#content',
    mainRegion: '#main'
});

这是我将附加内容的区域。稍后，在初始化路由器之后，我有下一个：

App.headerRegion.show(App.Views.Header);
App.leftRegion.show(App.Views.LeftSidebar);
App.rightRegion.show(App.Views.RightSidebar);

这会将我的内容加载到这个新区域。问题出现在 HeaderView 中。我的标题视图的模板：

<button id="open-left"><img src="assets/img/icons/menu-icon.png"></button>
<h1 class="title logo"><img src="assets/img/logo.png" height="28px" width="167px"></h1>
<button id="open-right"><img src="assets/img/icons/chat-icon.png"></button>

ItemView 也很简单：

var HeaderView = Backbone.Marionette.ItemView.extend({
    template: _.template(template),
});

在应用程序的某些部分，我不想<img>在标题中使用。应用程序的某些页面需要将其更新为文本，例如<h1>Settings</h1>. 我的问题是，最好的方法是什么？或者更好的是，这样做的方法是什么？现在我不知道从哪里开始，我想到的唯一想法是使用另一个模板创建一个新的 ItemView。

提前致谢！

4

1 回答 1

6

Marionette 为这种情况提供了一个有用的函数 getTemplate，你可以使用这个函数而不是模板：模板声明，就像这样。

SampleView = Backbone.Marionette.ItemView.extend({
   getTemplate: function(){
      if (this.model.get("foo")) 
          return "#sample-template";
      else       
          return "#a-different-template";
   },
});

因此，在您的应用程序的某些部分中，您需要一个没有图像的不同模板，您只需更改视图或模型上的一个值，该值可用于此函数，以便在您调用渲染时对模板进行更改。

于 2013-06-14T14:16:58.467 回答