Tag archives for tip

BackboneJS uses UnderscoreJS and UnderscoreJS embeds a micro template system who can be used in many situations.

In my LearningBackbone Project I play with templates in Example 007. In 4th column of that example I use the original column content as template.

This is the code that make it works:

SCRIPT vs DOM as templates:

Official tutorials teachs to use a SCRIPT block so store a templates string:

// page.html
<script type="text/template" id="my_template">
Hi, <%= person.name %>!
</script>

// foo_view.js
var FooView = Backbone.View.extend({
    template: _.template( $('#my_template').html() )
});

But i think may be often simple to write our template directly into DOM nodes so that template can works as text placeholder too:

// page.html
<div id="say_hello">Hi, <%= person.name %>!</div>

This DIV block contain an UnderscoreJS’s template string. When run our script we need to fetch template from the DIV, parse it and, later, populate the DIV with rendered content.

If you try to load the page without running Javascript this template works as text placeholder so you can test your design!

// foo_view.js
var FooView = Backbone.View.extend({
    initialize: function() {
        this.template = $('#say_hello').html();
        this.template = $('<textarea/>').html( this.template ).val();
        this.template = _.template( this.template );
        $('#say_hello').html('');
    }
});

This code may appear a little verbose because I need to explain it row by row… you can pack it into 1 line!

The naked code:

#04> this.template = $('#say_hello').html();

fetch the html content of target DOM node.

#05> this.template = $('<textarea/>').html( this.template ).val();

There is a problem! jQuery::html() method convert some characters with their entities! In particular our fetched template have &lt; and &lt; in place of < and >!

The solution is to pass this test into a TEXTAREA field who’s not applied to the document DOM then fetch it’s value with the jQuery::val() method who returns what we need!

#06> this.template = _.template( this.template );

Just compile the template text with UnderscoreJS::template() method. Now we have a ready to use template function who can receives data and returns compiled texts!

#007> $('#say_hello').html('');

Just empty the template container. This instruction may not be important because ofter view’s render() method replace the container contents anyway!

The problem is jQuery!

jQuery::html() converts special characters into entities, this become a problem with Underscore’s template syntax <% … %>.

// Template source
... <%= name %> ...

// this.$el.html() returns:
... &lt;= name &gt; ...

This way the content fetched from the DOM is not a correct Underscore template anymore!

The solution: TEXTAREA!

Fortunately the solution lyes into jQuery too!

You can create a virtual TEXTAREA field, this is not a performance sink because this element will not be added to the page’s DOM… so no re-rendering in triggered to the browser.

TEXTAREA can be populated with some HTML contents with or without entities tag brakets.

Then you can get TEXTAREA source with the val() method who returns plain text code ready to be compiled by the Underscore::template() engine!