Question

我是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。

提前致谢！

Answer 1

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

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

因此，在您需要使用不同模板的yur应用程序部分中，您只需更改修改视图或模型上的值，该值可用于此函数，以便在调用渲染时对模板进行更改

更新Backbone Marionette ItemView的某些部分

1 个答案: