HTML templates inside JavaScript file... What am I doing wrong?

Question

What I'm trying to achieve is to store HTML templates for everything that needs to be generated on the fly inside a separate js file (instead of rendering it in the page).

The buildHtml function how its currently setup works fine. Where I'm stuck is what if.. I've another variable inside the template object say 'input3' and its markup is something like <div>(exact markup from commonInput)</div>

I tried using it as input 3 : '<div>' + this.commonInput + '</div>' but it turns out you cannot refer object properties from inside using this (explained here).

I could create 'input3' with full html but for big html chunks this approach is not very useful.

Looking for

solution to this specific problem
reasons if this approach is a bad idea

better alternatives

$j(document).ready(function() {

var namespace = window.namespace || {};
namespace.feature = namespace.appName || {};

namespace.feature.templates = {

input1  :   '<div>'+
                '<p class="abc">Hey {username}</p>'+
            '</div>',

input2  :   '<div>'+
                '<div class="description">{description}</div>'+
            '</div>',

commonInput :   '<div class="common">Common code</div>'

};

namespace.feature.module = function() {

var container  = $j('#container'),
    t = namespace.feature.templates;

var buildHtml = function(type) {
    var tmpHtml = t.input1 + t.commonInput + t.input2;
    container.append(tmpHtml);
}

var init = function() {
    buildHtml();
}

return {
    init : init,
};

}();

namespace.feature.module.init();

});

have you considered using [`_.template`](http://documentcloud.github.com/underscore/#template) — Raynos, Jul 15 '11 at 01:28

Mrchief · Answer 1 · 2015-01-08T01:30:26.687

1

I'm not sure what your exact question is, but as far as better alternatives go, I would suggest using jQuery templates.

Here is a benchmarking page for all the different templating engines and their performance:http://jsperf.com/dom-vs-innerhtml-based-templating

You can look at the revisions to find different combinations of engines as well as run them on different browsers to see speed differences.

Update: The original jquery template project is no longer active. This is the new home for the old project: https://github.com/BorisMoore/jquery-tmpl

I would no longer recommend jquery-templates since there are much better alternatives now. The last time I checked, dustJs by linkedIn fork seems to be the most promising one.

edited Jan 08 '15 at 01:30

answered Jul 15 '11 at 01:19

Mrchief

75,126
20
142
189

That link has rot, unfortunately. Perhaps this is the project you mean? http://plugins.jquery.com/loadTemplate/ – Michael Scheper Jan 07 '15 at 21:38
1

Took out the link and replaced with the correct one. The one you have looks similar but quite not the original. – Mrchief Jan 08 '15 at 01:31

score 1 · Accepted Answer · answered Jul 15 '11 at 01:26

1

just on the top of my head.

You could write the templates as functions that build strings.

input3 : function(param) {
    return '<div>' + param + '</div>'
}

then:

var tmpHTML = t.input1 + t.input2 + t.input3(t.commonInput);

Also, i like to build my own DOM objects when building HTML. and avoid the use of hardcoded strings.

http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype

answered Jul 15 '11 at 01:26

Germán Rodríguez

4,284
1
19
19

what are your thoughts on this approach for creating content on the fly... you recommend any other approach/solution. I've a question here about that http://stackoverflow.com/questions/6685582/javascript-best-approach-for-managing-adding-content-on-fly-and-page-load – Adi Jul 15 '11 at 02:28

HTML templates inside JavaScript file... What am I doing wrong?

2 Answers2