Шаблоны ember hbs как отдельные файлы

Я хочу запустить примеры ember.js(версии 1.0.0 Final) на первой странице.

Они разделили каждый шаблон дескриптора в отдельный файл с расширением .hbs.

Итак, я просто скопировал весь код и создал файлы с одинаковыми именами. Когда я им бегу, ничего не происходит. Я пытаюсь использовать пример ROUTING.

Мой index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ember Starter Kit</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>

  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars-1.0.0.js"></script>
  <script src="js/libs/ember-1.0.0.js"></script>
  <script src="js/libs/bootstrap.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

Мои шаблоны находятся внутри корневого каталога, и я скопировал их в /templates, но это не помогло.

Ответ 1

Когда у вас есть шаблоны в разных файлах, вы должны их загрузить и скомпилировать, поскольку EmberJS не обнаруживает файлы. Есть несколько способов сделать это.

1) Загрузите их в Ember.TEMPLATES: Ember загружает шаблоны и подталкивает их к объекту Ember.TEMPLATES. он сохраняет содержимое шаблонов с помощью клавиши small name согласно Соглашениям об именах EmberJS. Поэтому мы сами можем нажать шаблоны после их компиляции.

Например: если у вас есть шаблон с именем "post", загрузите файл post.hbs через запрос AJAX, затем установите

// "data" is html content returned from Ajax request
Ember.TEMPLATES['post'] = Ember.Handlebars.compile(data)

Итак, теперь вы можете получить доступ к шаблону напрямую как

   {{partial 'post'}}

в дескрипторах или в качестве templateName для любых классов вида.

App.OtherView = Ember.View.extend({
   templateName: 'post'
});

Таким образом, вам может потребоваться загрузить все файлы HBS через запрос AJAX и скомпилировать их перед загрузкой приложения. Это большие накладные расходы для приложения.

Чтобы облегчить это, мы можем предварительно скомпилировать все шаблоны и сохранить их как JS (который фактически нажимает их на объект Ember.TEMPLATES) и просто загружать этот JS. Это может быть достигнуто с помощью плагинов ember-templates, который также доступен в качестве задания grunt grunt-ember-templates.

2). Второй способ - создать объект представления и установить скомпилированный код в шаблон каждого представления после запроса AJAX. Текстовый плагин requirejs поможет вам это сделать.

Как и сейчас, люди Ember предлагают не создавать объект вида, если это необходимо, я предлагаю вам следовать первому пути. Предварительно скомпилированный - лучший вариант, который уменьшает массу работы при создании шаблона.

UPDATE. Существуют некоторые инструменты для создания проектов, которые занимаются составлением шаблонов рулей. Yeoman и Ember-Cli - это те, которые вы можете посмотреть один раз.

Ответ 2

Я строю свои шаблоны с помощью Grunt. Он создает один файл template.js, который я загружаю после Ember. Это моя собственная конфигурация Grunt на coffescript:

module.exports = (grunt) ->
  tmpl_dir = 'app_src/templates'
  grunt.initConfig
    tmpl_dir: tmpl_dir
    ember_handlebars:
      options:
        processName: (path) ->
          re = new RegExp("^#{tmpl_dir}\/(.*)\.hbs$", 'i')
          r = path.match(re)
          path = r[1]
          path = path.replace /\_/g, '-'
          console.log '>', path
          path
      files:
        src: '<%= tmpl_dir %>/**/*.hbs'
        dest: 'public/js/templates.js'

  grunt.loadNpmTasks('grunt-ember-handlebars')

Ответ 3

Вам нужно либо использовать процесс сборки для компиляции ваших шаблонов, либо объединить логику приложения, либо вам нужно использовать какую-то реализацию разрешения модуля.

Если вы используете рельсы в фоновом режиме, посмотрите https://github.com/emberjs/ember-rails Если нет, просмотрите https://github.com/stefanpenner/ember-app-kit и https://github.com/rpflorence/ember-tools