Underscore.js doesn't substitutes values

Question

Lets research the following code line:

terminalsListHtml += this.compiled(_.extend(this.terminals[i], {clazz: 'all'}, obj));

template:

compiled: _.template($('#terminal-template').text()), 

the following selector

$('#terminal-template').text()

returns

"
    <li data-terminal-id="{{ id }}" class="{{ clazz2 }}">
        <label>
            <input type="radio" name="terminal" class="{{ clazz }}" data-terminal-id="{{ id }}"/>
            <a href="/admin/createCompany/getOriginalImage/{{imageId}}" title=""
               class="fancy_image small-picture"><img
                    src="/admin/createCompany/getMediumThumbnail/{{imageId}}"
                    alt=""/></a>

            <h3>{{ name }}
                <small>{{ place }}</small>
            </h3>
            <p>{{ description }}</p>

            <p class="count">Проходимость: <span>{{ count }}</span> чел./час</p>

            <p class="count">Стоимость: <span>{{ amount }}</span> руб./час</p>
        </label>
    </li>
"

the following code line

_.extend(this.terminals[i], {clazz: 'all'}, obj)

returns

But after execution

terminalsListHtml += this.compiled(_.extend(this.terminals[i], {clazz: 'all'}, obj));

terminalsListHtml equals

"
    <li data-terminal-id="{{ id }}" class="{{ clazz2 }}">
        <label>
            <input type="radio" name="terminal" class="{{ clazz }}" data-terminal-id="{{ id }}"/>
            <a href="/admin/createCompany/getOriginalImage/{{imageId}}" title=""
               class="fancy_image small-picture"><img
                    src="/admin/createCompany/getMediumThumbnail/{{imageId}}"
                    alt=""/></a>

            <h3>{{ name }}
                <small>{{ place }}</small>
            </h3>
            <p>{{ description }}</p>

            <p class="count">Проходимость: <span>{{ count }}</span> чел./час</p>

            <p class="count">Стоимость: <span>{{ amount }}</span> руб./час</p>
        </label>
    </li>
" 

what do I wrong?

Answer 1

Underscore.js templating uses EJS-style templates, while you use a different kind. You can change the templating settings to work for your templates like so:

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

This was copied from the documentation .