Aurelia - динамически создавать пользовательский элемент в view-модели

Question

У меня есть приложение Aurelia, где пользователь может нажать на кнопку и создать новую вкладку. Вкладка и ее содержимое (пользовательский элемент) не существуют на странице, пока пользователь не нажмет кнопку. Я генерирую HTML для содержимого во время выполнения (через Javascript) в моей модели представления.

Я постоянно упоминаю об использовании функций compose или enhance движка шаблонов, но ни одна из них не используется. работает на меня. Я не знаю, как бы я использовал элемент <compose> (в моем HTML), поскольку я создаю элемент на основе нажатия пользователем кнопки.

Я думал, что кнопка имеет click.delegate для функции, которая в конечном итоге делает что-то вроде

const customElement = document.createElement('custom-element');
parentElement.appendChild(customElement);

const view = this.templatingEngine.enhance({
  element        : customElement,
  container      : this.container, // injected
  resources      : this.viewResources, // injected
  bindingContext: {
    attrOne: this.foo,
    attrTwo: this.bar,
  }
});

view.attached();

Но все, что это делает, это создает HTML элемент <custom-element></custom-element> без фактической привязки к нему каких-либо атрибутов.

Как можно Я создаю пользовательский элемент, аналогичный <custom-element attr-one.bind="foo" attr-two.bind="bar"></custom-element>, но через Javascript?

Answer 1

Как вы указали в своем ответе, именно недостающие ресурсы вызвали проблему. Одним из решений является его глобальная регистрация. Это не всегда желаемое поведение, так как иногда вы хотите лениво загружать ресурсы и улучшать некоторые ленивые части HTML. Enhance API принимает опцию для ресурсов, с которыми вы хотите скомпилировать представление. Таким образом, вы можете сделать это:

.enhance({
  resources: new ViewResources(myGlobalResources) // alter the view resources here
})

для ресурсов представления, если вы хотите получить его из определенного пользовательского элемента, вы можете подключиться к созданному жизненному циклу и получить его, или вы можете вставить контейнер и получить его через container.get(ViewResources)

Answer 2

Я обнаружил проблему = \ Мне пришлось сделать свой пользовательский элемент глобальным ресурсом.