Ember.js → Компиляция шаблонов в Ember.js 1.10

Только немного отвлёкся от Ember.js, как в нём внезапно произошли изменения, а именно, сменился движок рендеринга шаблонов. Был Handlebars, а стал какой-то HTMLBars, у которого я даже официального сайта не наблюдаю. Хотя для рядового разработчика ничего не меняется, внешне сами шаблоны остаются почти как есть, основные же отличия во внутренностях.

Если в двух словах, то было и стало.

Раз:

1
2

<script src="/bower_components/handlebars/handlebars.js"></script>
<script src="/bower_components/ember/ember.js"></script>

Два:

1
2

<script src="/bower_components/ember/ember-template-compiler.js"></script>
<script src="/bower_components/ember/ember.js"></script>

Второй момент - это предварительная компиляция *.hbs шаблонов в JavaScript-код. В предыдущей записи, посвящённой Ember.js, использовался модуль ember-precompile, однако сейчас я его даже пробовать не стал, уверен, что ошибки вылезут довольно быстро. Есть же и другие инструменты, рекомендованные на официальном сайте данного фреймворка (здесь).

Использоваться будет вот такая штука - grunt-ember-templates. Нет времени объяснять, просто создаём подобные файлы и готово.

package.json

1
2
3
4
5
6
7
8
9

{
  "name": "package-name",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-ember-templates": "0.5.0"
  }
}

Gruntfile.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

module.exports = function(grunt) {

  grunt.initConfig({
    emberTemplates: {
      compile: {
        options: {
          templateName: function(src) {
            return src.replace(/web\/app\/templates\//, '').replace('/\./g', '/');
          },
          templateCompilerPath: 'web/bower_components/ember/ember-template-compiler.js',
          handlebarsPath: 'web/bower_components/handlebars/handlebars.js'
        },
        files: {
          "web/app/templates.js": "web/app/templates/*.hbs"
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-ember-templates');
  grunt.registerTask('default', ['emberTemplates']);
};

Естественно, пути к соответствующим файлам должны быть прописаны правильно. Что ещё важно отметить - опции templateCompilerPath и handlebarsPath добавлены неспроста. На данный момент npm-модули ember-template-compiler и handlebars не справляются со своей задачей и на замену им нужно подсунуть аналогичные файлы, но из модулей bower-а. Думаю, что в ближайшее (или нет) время код обновят и такие извороты не понадобятся, но пока так.

Устанавливаем модули npm и запускаем grunt - шаблоны будут скомпилированы.