javascript - Integrating iCanHaz and Marionette

Question

I'm a big fan of ICanHaz, and I'm trying to directly intregrate it into a new Marionette application I'm building. However, going off this post, I have written this that reaches into the render method and changes it in Marionette:

// Set up Initalizer
    APP.addInitializer(function() {

        //Reach into Marionette and switch out templating system to ICH
        Backbone.Marionette.Renderer.render = function(template, data){
            return ich[template](data);
        }

        //Create Router
        new APP.Routers.GlobalRouter();

        //Start Backbone History
        Backbone.history.start();

    });

If I walk through this function, all the data seems to work fine. However, when put into use and trying to use it for layouts and Item Views, nothing gets appended or inserted. This is from my GlobalRouter:

 //Grab the main Layout
        var layout = new APP.Views.LayoutView();

        //Render that layout
        layout.render();


        //Make the model
        var userModel = new APP.Models.UserModel({
          "user_name" : "[email protected]",
          "tenant" : "Ginger Ale is Great"
        });

        //Make the Header Region
        var headerRegion = new APP.Views.HeaderView({model: userModel});
        layout.header.show(headerRegion);

This all happens in a method that gets called when index is hit. There are no JS errors so I have nothing to go on. However, it in the render function I append the data to the body, it will add (however ruining my layout and region structure).

I am storing my templates in index.html.

Can anyone help with this?

Answer 1

Okay, I couldn't find an easy way to do this using ICH. However, due to another SO I found, very similar functionality can be found just using Mustache.

Using this code:

 Backbone.Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) {
    return Mustache.compile(rawTemplate);
 }

Lets you change the renderer so you can pull mustache templates from index.html using Marionette's template call. A mustache template looks like this:

 <script id="headerTemplate" type="text/template">
        <p>{{user_name}}</p>
        <p>{{tenant}}</p>
    </script>

The difference is that the type is 'text/template' as opposed to 'text/html'. Otherwise it acts very similar.

Hope this helps someone else.