Aurelia是否有虚拟元素?

问题描述

淘汰赛JS具有虚拟元素的概念.这些是您可以绑定的无头"元素，没有HTML元素作为容器.这使您可以将数组绑定在不散发外部HTML的容器中.

Knockout JS has the concept of virtual elements. These are "headless" elements which you can bind to that do not have an HTML element as a container. This allows you to bind arrays in a container that emits no outer HTML.

例如，在Knockout JS中，您可以执行以下操作:

For example, in Knockout JS you can do something like:

<!-- ko foreach: items -->
  <li data-bind="text: $data"></li>
<!-- /ko -->

一系列li标签将在没有父元素的情况下发出.

A series of li tags will be emitted without a parent element.

Aurelia提供类似的东西吗?我确实看到您可以在Aurelia中创建可以绑定的自定义元素，但是这些自定义元素会作为HTML元素发送到DOM.

Does Aurelia offer something similar? I do see you can create custom elements in Aurelia which can be bound, but these custom elements are emitted to the DOM as HTML elements.

例如，在Aurelia中，您可以执行以下操作:

For example, in Aurelia you can do something like:

<foo repeat.for="item of items" foo.bind="item"></foo>

但是，这将发出foo元素标签.在没有不需要的父元素标签的情况下，如何在Aurelia中完成类似的事情?

However, this will emit foo element tags. How do you accomplish something like this in Aurelia without the unwanted parent element tags?

推荐答案

感谢詹姆斯·索普(James Thorpe)为我指明了正确的方向. Aurelia添加了@containerless属性，您可以使用该属性装饰自定义元素类.当您执行此操作时，它将在没有容器的情况下进行渲染.

Thanks to James Thorpe for pointing me in the right direction. Aurelia added a @containerless attribute which you decorate your custom element class with. When you do it renders without the container.

示例:

import {customElement, containerless} from 'aurelia-framework';

@customElement('foo')
@containerless
export class Foo {
}

这篇关于Aurelia是否有虚拟元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！