Разница при использовании "@containerless" на виртуальной машине и "без контейнера" в представлении HTML для пользовательских элементов

Question

Я вижу странное поведение при использовании безконтейнерной функциональности для компонентов aurelia. Мы создаем пользовательские элементы для контейнера SVG, что потребовало от нас использования тега без контейнера для удаления тегов пользовательских элементов перед добавлением его в DOM, поскольку в контейнере SVG допускаются только теги SVGElements. Мы используем Aurelia версии 1.0.0 и создаем наш SPA с помощью веб-пакета.

Здесь вы можете найти пример gistrun, который показывает реализацию 2 использования без контейнеров. https://gist.run/?id=58ba6282ad54c1263eec3a141fe42183

В этом примере я создал 2 viewmodels и связал это с нашими пользовательскими элементами. С помощью as-element="compose" сказать Аурелии, что я создал модель представления и что Аурелия не должна создавать ВМ. Разница между этими элементами и пользовательскими элементами заключается в теге без контейнера:

1. CustomElement не имеет @containerless тег в Viewmodel, но в представлении HTML есть "без контейнера".

2. Компонент withattr не имеет "контейнера" в представлении HTML, но он имеет @containerless тег в Viewmodel, как описано в Aurelia HUB.

Я ожидаю, что в обеих ситуациях я увижу синий прямоугольник. Метки Aurelia удаляются из-за тега без контейнеров. Тем не менее @containerless тег не работает, как в реализации 2.

Вопрос: Любая подсказка, почему эти реализации имеют разные результаты? Какой правильный? Я ожидаю 2, как указано в Документах Aurelia, что @containerless тег должен быть размещен на модели представления.

Любая помощь будет оценена:)

Answer 1

@containerless Декоратор работает непосредственно с элементом, на котором он находится.

Происходит то, что декоратор применяется к вашему withattr элемент, но as-element="compose" превращает это в compose элемент под капотом. это compose элемент тогда не имеет @containerless тег применяется к нему.

Точно так же, с вашим customelement вы на самом деле не подаете заявку @containerless в customelement, но к compose во что оно превратилось.

Удалить as-element="compose" часть и просто объявить <withattr/> элемент голый в разметке, и containerless будет работать, потому что фактический элемент все еще будет withattr,

Обратите внимание, что не рекомендуется использовать @containerless с as-element если нет другого способа сделать что-либо, как в случае использования пользовательских элементов внутри table элементы.

Почему бы просто не иметь compose внутри вашего пользовательского элемента, и связать путь к представлению через привязываемое свойство в пользовательском элементе?

РЕДАКТИРОВАТЬ

Извините, я упустил из виду тот факт, что вы хотите указать свой собственный экземпляр ViewModel.

Это требование ограничивает вас в использовании compose элемент, потому что это единственный способ, которым Aurelia поддерживает предоставление собственного экземпляра ViewModel.

Также уверен, что вам нужно @containerless, И тебе это нужно @containerless быть на compose элемент.

Вывод, ваше первое решение кажется идеальным с технической точки зрения.

Из личных предпочтений я бы сделал это:

<compose containerless view.bind="'./customelement.html'" view-model.bind="customElementViewModel"/>

Вместо этого:

<customelement containerless as-element="compose" view-model.bind="customElementViewModel"/>

Чтобы быть немного более гибким с динамическими представлениями, проясните, что мы используем composeи не нужно <require> вид. Но это действительно сводится к предпочтениям и другим требованиям.