How to use Backbone.Marionette.ItemView with a mustache

Question

The following code works fine using Backbone.Marionette.ItemView , but not Mustache .

Backbone.Marionette.ItemView - no mustache

I would like to use the same code, but loading the varaible template using Mustache .

Here is my code:

Backbone.Marionette.ItemView - from Mustache

Any idea why my code is not working and why?

thanks

Answer 1

Marionette assumes the use of UnderscoreJS templates by default. It is not enough to simply replace the template configuration for the view. You also need to replace the rendering process.

In your simple example, you only need to override the Marionette.Renderer.render function to call Mustache, and then set the template your views to the required line template:

 Backbone.Marionette.Renderer.render = function(template, data){ return Mustache.to_html(template, data); } var rowTemplate = '{{ username }}{{ fullname }}'; // A Grid Row var GridRow = Backbone.Marionette.ItemView.extend({ template: rowTemplate, tagName: "tr" }); 

Note that your JSFiddle will still not work, even if you put this code in place, since the GridView still uses the jQuery selector / row as the template attribute. You will need to replace it with the same type of template in order to return the mustache.

http://jsfiddle.net/derickbailey/d7qDz/

Answer 2

I would like to update the answer a bit, as I was just trying to handle it; and I used this answer as a reference.

Here are my findings:

The answer here is a bit outdated with the current version of Mustache (which is understandable, since it is quite old)

• Mustache.to_html is now deprecated, but still exists as a simple wrapper around Mustache.render for backward compatibility. Check out this link .

Also, I found the Marionette.Renderer.render redefinition, as in the accepted answer above, completely bypasses the Marionette.TemplateCache layer, which may not be desirable.

Here is the source for the Marionette.Renderer.render method:

 // Source: http://bit.ly/1f7CBRy render: function(template, data){ if (!template) { var error = new Error("Cannot render the template since it false, null or undefined."); error.name = "TemplateNotFoundError"; throw error; } var templateFunc; if (typeof template === "function"){ templateFunc = template; } else { templateFunc = Marionette.TemplateCache.get(template); } return templateFunc(data); } 

As you can see, it accesses the Marionette.TemplateCache.get method, and the answer above does nothing to support this functionality.

Now, to get to my solution (note: this answer is not wrong, this is my approach to support Marionette.TemplateCache level):

As the comments above suggest , override compileTemplate :

 Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) { // Mustache.parse will not return anything useful (returns an array) // The render function from Marionette.Renderer.render expects a function // so instead pass a partial of Mustache.render // with rawTemplate as the initial parameter. // Additionally Mustache.compile no longer exists so we must use parse. Mustache.parse(rawTemplate); return _.partial(Mustache.render, rawTemplate); }; 

This is where JSFiddle works as proof .

In the fiddle, I also redefined Marionette.TemplateCache.loadTemplate to demonstrate that it only calls once. The body of the function adds only debug output, and then re-implements most of the original functions (minus error handling).