grunt contrib-jst для отрисовки шаблонов подчеркивания неправильно форматирует

Question

Я пытаюсь использовать grunt-contrib-jst для компиляции моих шаблонов подчеркивания, но, похоже, что они не корректно отображают / сохраняют переменные. Вот как обычно выглядит шаблон:

<script id="header-template" type="text/template">
    <h4><%= subhead %></h4>
    <h1><span class="head-text"><%= head %></span>
      <span class="subtext"><%= subtext %></span>
    </h1>
    <p></p>
  </script>

и вот то, что делается через ворчание:

this["JST"] = this["JST"] || {};

this["JST"]["templates/header.html"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p += '<h4>' +
((__t = ( subhead )) == null ? '' : __t) +
'</h4>\n<h1><span class="head-text">' +
((__t = ( head )) == null ? '' : __t) +
'</span>\n  <span class="subtext">' +
((__t = ( subtext )) == null ? '' : __t) +
'</span>\n</h1>\n<p></p>';

}
return __p
};

Вот как я поставил себе задачу:

jst: {
      compile: {
        files: {
          "scripts/templates/all.js": ["templates/*.html"]
        }
      }
    }

и когда я пытаюсь использовать шаблон:

var app = app || {};

app.HeaderView = Backbone.View.extend({
    el: '#header-container',
    //template: _.template( $( '#header-template' ).html() ),
    template: JST['templates/header.html'](), //http://stackru.com/questions/8366733/external-template-in-underscore

    initialize: function( templateContent ) {
        this.render(templateContent);
    },
    render: function(templateContent) {
        this.$el.html(this.template(templateContent));
        return this;
    }
});

Я получаю эту ошибку:

Uncaught ReferenceError: subhead is not defined

Любая идея, что не так и как сохранить форматирование моих оригинальных шаблонов?

Answer 1

Вы говорите, что вы

[...] пытаясь использовать grunt-contrib-jst для компиляции моих шаблонов подчеркивания

Это именно то, что происходит. Если вы посмотрите на _.template документы, вы увидите это:

Свойство source доступно в функции скомпилированного шаблона для легкой предварительной компиляции.

Если вы сделаете это с этим <script>:

var t = _.template($('#header-template').html());
console.log(t.source);

Вы увидите эту уродливую функцию в консоли.

Демо: http://jsfiddle.net/ambiguous/WjNGC/

Итак, ваша задача JST - это просто компилировать ваши шаблоны, используя _.template а затем сбросить скомпилированный шаблон функции source атрибут файла; затем, когда браузер загружает этот файл JavaScript, вы получаете скомпилированный шаблон обратно.

В результате вы можете сказать это:

var html = JST['templates/header.html'](data);

и получите заполненный шаблон в html без необходимости компилировать шаблон в браузере.