Updating some parts of the puppet puppet

Question

I am new to Backbone.js as well as Backbone.Marionette, and I am having some problems trying to follow the best examples for my application.

I am creating a mobile web application encapsulated by PhoneGap. I have a general layout (e.g. Facebook): 2 sidebars, a main title and a content area where all kinds of views are loaded.

My initialization code for the Backbone.Marionette app:

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

These are my regions where content will be added. Later, right after the initialization of the router, I have the following:

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

This will upload my content to new regions. The problem occurs in the HeaderView. Template for my header:

 <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> 

The ItemView element is also very simple:

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

In some parts of the application, I do not want to use <img> in the header. Some pages of the application will need to update this to text, for example, something like <h1>Settings</h1> . My question is: what is the best way to do this? Or better, what is the way to do this? Right now I don’t know where to start, and the only idea I have in mind is to create a new ItemView with a different template.

Thanks in advance!

Answer 1

Marionette provides a useful function for this getTemplate case, and you use this template isntead function: template declarations, for example.

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

So, in parts of the yur application where you need another template with an image that you just change, change the value in the view or your model, which you can use in this function to make changes to the template at the time you call render.