Динамически компилировать шаблон HTMLBars во время выполнения в Ember

Поскольку Ember 2.10 теперь использует Glimmer, здесь могут возникнуть некоторые сложности. Чтобы скомпилировать шаблон, вам нужно включить ember-template-compiler.js в ваше приложение. Я бы рекомендовал использовать ember-browserify и ember-source.

В вашем контроллере импортируйте компилятор следующим образом.

import Ember from 'ember';
import Compiler from 'npm:ember-source/dist/ember-template-compiler';

export default Ember.Controller.extend({
  compileContent() {
    const template = Compiler.compile(this.get('dynamicContent'));
    Ember.TEMPLATES[`YOUR_TEMPLATE_NAME`] = template;
  },
  // we observe content changes here
  contentDidUpdate: Ember.observer('dynamicContent', function() {
    this.compileContent();
  }),
});

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

e.g.

<ul>
  <li>{{#link-to 'index'}}Home{{/link-to}}</li>
</ul>
<div {{action 'yourCustomAction'}}>
  {{your-custom-component params=yourCustomParams model=model flag=true}}
</div>

Теперь давайте совершим магию в вашем шаблоне, используя помощника {{partial}}.

...

{{partial 'YOUR_TEMPLATE_NAME'}}

...

Этот метод работает в Ember 2.13 без предупреждений об устаревании, он должен работать в будущих обновлениях. Обратите внимание, что Ember.TEMPLATES — это глобальная переменная, и движок, кажется, каким-то образом кэширует ее, поэтому не переназначайте новые значения существующим.

Этот ответ устарел. Пожалуйста, смотрите ответ @poohoka, который я принял выше.

Создание ответа Kingpin2K на Скомпилировать клиентскую часть шаблона в ember с использованием HTMLbars:

Для получения дополнительной информации может быть полезно вернуться к Компиляция шаблонов с помощью Ember 1.10. Нам все еще нужно загрузить ember-template-compiler.js. Добавлять

  app.import('bower_components/ember/ember-template-compiler.js');

к вашему ember-cli-build.js.

Затем вы можете написать компонент следующим образом:

import Ember from 'ember';

export default Ember.Component.extend({

  layout: Ember.computed(function() {
    return Ember.HTMLBars.compile(
      '{{foo-bar}} <span>' + 'hello' + '</span>'
    );
  }),

});

Это решение, вероятно, сломается в будущих выпусках Ember, в зависимости от того, как изменится процесс компиляции шаблона Ember с появлением Мерцание 2.

Начиная с Ember 2.13+ (по умолчанию без Bower) вам необходимо добавить в файл ember-cli-build.js:

app.import('vendor/ember/ember-template-compiler.js');

Для версии Ember до 2.10 вам необходимо включить его через bower (также на ember-cli-build.js)

app.import('bower_components/ember/ember-template-compiler.js');

А по коду нужно:

Ember.TEMPLATES['mycompiledcode'] = Ember.HTMLBars.compile('{{foo-bar}} <span>' + 'hello' + '</span>');

В вызове файла hbs:

{{partial 'mycompiledcode'}}

Или вы можете сделать такой компонент:

import Ember from 'ember';

export default Ember.Component.extend({

  layout: Ember.computed(function() {
    return Ember.HTMLBars.compile(
      '{{foo-bar}} <span>' + 'hello' + '</span>'
    );
  }),

});

На основе решения другого ответа https://stackoverflow.com/a/37345099/6505594

В настоящее время я использую Ember-2.9.x, и я добавил последние рули с моим bower.json:

"handlebars": "^4.0.0"

А затем добавил его через мой файл ember-cli-build.js:

app.import('bower_components/handlebars/handlebars.js');

Это сработало для моего компонента typeahead, и я не вижу причин, по которым это не сработает при обновлении до Ember-2.10 с помощью Glimmer2.