2013-06-14 3 views
4

Я новичок в Backbone.js, а также в Backbone.Marionette, и у меня возникают некоторые проблемы, пытаясь следовать лучшим образцам для моего приложения.Обновление некоторых частей манекена базовой линии ItemView

Я создаю мобильное веб-приложение, инкапсулированное PhoneGap. У меня есть общий макет (например, 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 с другим шаблоном.

Заранее благодарен!

ответ

6

Marionette предоставляет полезную функцию для этого случая getTemplate, и вы используете эту функцию isntead шаблона: объявления шаблона, например.

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

Таким образом, в части Юр приложения, где требуется шаблон с различным wihtout изображения, просто изменить изменить значение на представлении или модель, которую можно использовать в этой функции, высказанные изменения в шаблоне на время, которое вы вызываете рендеринг.

+0

поэтому, если я не ошибаюсь, мой ItemView должен использовать модель. Затем присоедините его к области. Когда я хочу изменить имя, я должен отредактировать модель, и ItemView будет перерисовываться, и поскольку он будет использовать 'getTemplate', он обнаружит изменения. Это правильно? Спасибо! – udexter

+1

с использованием модели является необязательным, вы можете иметь только новое свойство представления, chnge значение свойства в соответствии с вашим сценарием и вызовом рендеринга, как только вы вызове render, getTemplate будет вызываться, и он будет проверять значение это свойство, или вы можете сделать это с помощью модели. но ключ заключается в использовании функции getTemplate, о которой я думаю. –

+0

Удивительный! Спасибо :) – udexter

Смежные вопросы