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

Question

Я хочу динамически компилировать (а затем визуализировать) шаблон HTMLBars во время выполнения на клиенте в Ember. Как я могу это сделать?

Answer 1

Поскольку 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 до ваших пользовательских компонентов, даже ваши привязки действий.

например

<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 является глобальной переменной, и движок, похоже, как-то кеширует ее, поэтому не переназначайте новые значения существующим.

Answer 2

Построение ответа 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 Template с появлением Glimmer 2.

Answer 3

Начиная с Ember 2.13+ (без чаши по умолчанию), вам нужно добавить в ваш 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>'
    );
  }),

});

На основе решения другого ответа /questions/1555142/dinamicheski-kompilirovat-shablon-htmlbars-vo-vremya-vyipolneniya-v-ember/1555161#1555161

Answer 4

Я в настоящее время на 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.