Question

我试图创建一个自定义容器元素来跟踪一些子按钮元素。问题是当我这样做时，网页上没有显示按钮。我究竟做错了什么？我也试图使用aurelia @children装饰器在我的容器视图模型中使用按钮，但这似乎也不起作用。请帮忙！

如果我将按钮元素移出主要自定义元素，它们就会出现。

我的自定义元素视图main.html

<template>   
    <div class="col-sm-9" style="text-align: left;">        
    </div>
</template>

自定义视图模型main.js

import {children} from 'aurelia-framework';
 export class main {
    @children('button') buttons;
    constructor() {
        console.log("in the main constructor");
    }
}

`

app.html

<template>
  <require from="./widgets/main"></require>
  <main>
      <button class="btn btn-default" type="button">On</button>
      <button class="btn btn-default" type="button">Off</button>
  </main>      
</template>

Answer 1

此答案尚未结束!!!

请在此处查看Aurelia文档中的当前答案：http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-content-projection

您需要在自定义元素的视图文件中包含<content></content>元素。如果您只想显示自定义元素内容中的button元素，请使用<content select="button"></content>

请注意，这将在Aurelia RC1中更改为使用Shadow DOM规范已更改为的命名插槽标准（尽管当前没有浏览器支持它）。

这是一个正在运行的示例：https://gist.run/?id=4314bba289d20cf491eb82d5c620f9c0您将在示例中注意我如何使用select属性和css样式选择器。我还使用没有选择器的content元素来展示它如何作为一个包罗万象。

但是，这将很快改变。我们现在正在努力实施slot。

app.html

<template>
  <require from="./custom-element"></require>
  <my-custom-element>
      <button class="btn btn-default" type="button">On</button>
      <div>
        This div falls back to &lt;content&gt; since nothing more specific chooses it. <br />
        Notice how it is displayed last b/c of this.<br />
        Remove &lt;content /&gt; element in custom element and this won't be used in the rendering of the custom element.
      </div>
      <div class="footer">Footer</div>
      <button class="btn btn-default" type="button">Off</button>
  </my-custom-element>      
</template>

定制element.html

<template>   
    <content select="button"></content>
    <content select="div.footer"></content>
    <content></content>
</template>

定制element.js

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

@customElement('my-custom-element')
export class MyCustomElement {
  @children('button') buttons;
  constructor() {
  }

  bind() {
    console.log(this.buttons);
  }
}

哦，顺便说一句，如果您认为自己可能想要使用自己的名字，那么你应该避免创建不会在其名称中出现短划线的自定义元素（main没有短划线） Aurelia自定义元素作为Web组件自定义元素。

使用aurelia自定义元素作为父元素时，不会显示按钮元素

1 个答案: