I'm working on my larger project to date, and on top of that I'm using underscore for the first time. All is working perfectly but I'd like some criticism on the use of underscore templating and underscore after function.

The goal of the app is to generate on the dom a messaging interface starting from an empty div. It gets initialized by passing the jQuery selector of that empty div.

I took out most of the code and left what I'd like to be reviewed the most, hope the flow of the app is quite clear anyway.

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

var mssg_tmpl = {
        msg_container : ' \
    <div class="row-fluid msg-container well" id="msg-<% id %>"> \
        some html \

        msg_reply : ' \
    <div class="reply well message"> \
        some html \


mssg = {
    init : function(selector) {
        this.$container = $(selector);
        this.tmpl = {};         // List of compiled templates functions
        this.messages = [{      // THIS IS HARDCODE TO ILLUSTRATE BASIC STRUCTURE
            id: 1,              // Thread opener
            children: [2,3,4]   // Replies
        }, {
            id: 5, 
            children: [6,7,8]

        for ( var i in this.messages) {
            this.$container.append(this.tmpl.msg_container(this.messages[i])); // fn msg_container is a compiled template
            this.messages[i].$container = $('#msg-' + this.messages[i].id);

        return this;

    compileTemplates : function(templates) {
      for ( var k in templates) {
        this.tmpl[k] = _.template(templates[k]);

    fetchChildren : function(message) {

        var renderChildren = _.after(message.children.length, function() {
            children = _.sortBy(children, 'id'); // Sort replies (oldest first)
            for ( var i in children) {
                message.$container.find('div.msg-reply-container').before(mssg.tmpl.msg_reply(children[i])); // fn msg_reply is a compiled template

        var children = [];

        for ( var i in message.children) {
                url : 'getmessage.htm?messageId=' + message.children[i]
            }).done(function(response) {


mssg = mssg.init('#messaging');



1 Answer 1


Since you asked to review only the underscore part,

Just had one remark that I would suggest to move the templates to a script tag "text/template" rather than defining them as a variable.


<script type="text/template" id="msg_container">
    <div class="row-fluid msg-container well" id="msg-<% id %>">
        some html

<script type="text/template" id="msg_reply">
    <div class="reply well message">
        some html

Compile and use the same like below,

var msg_container = _.template($('#msg_container').html());
var msg_reply = _.template($('#msg_reply').html());

Though you asked to review only the '_' part but couldn't resist asking this question, From your example snippet I see 6 potential AJAX calls based on the loops. Wouldn't there be a performance problem since it completely relies on the number of messages and replies and what if the messages and replies are more or I could be missing the overall picture :)

  • 1
    \$\begingroup\$ Hi thanks for taking the time to read and comment! I know the best practice would be to move templates to a script tag but the goal is to make this a library than can be imported without much hassle into all the apps my company works on, so it's essential that who implements it in their code only has to include a js file, a css file, and an empty div where the app will be initialized. I am considering moving templates to a separate js file which could be a little better from the present solution. \$\endgroup\$ Commented Feb 28, 2013 at 15:27
  • \$\begingroup\$ @DavidFregoli I would keep templates as much as possible out of the library. Separation of concerns. \$\endgroup\$ Commented Dec 10, 2013 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.