haiau79 haiau79 - 3 months ago 32
HTML Question

button element's dont display when using aurelia custom element as parent

I'm trying to create a custom container element to keep track of some child button elements. The problem is the buttons do not display on the web page when I do this. What am I doing wrong? I am also trying to use the aurelia @children decorator to have the buttons in my container view-model, but that doesn't seem to be working either. Please help!

If I move the button elements out of the main custom element, they appear.

My custom element view main.html

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


custom view-model 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

THIS ANSWER IS OUT OF DATE!!!

Please check the Aurelia documentation for the current answer here: http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-content-projection


You need to include the <content></content> element in your custom element's view file. If you only want to display button elements that are in the content for your custom element, then use <content select="button"></content>

Please note that this will be changing in Aurelia RC1 to using the named slots standard that the Shadow DOM spec has changed to (though no browsers support it currently).

Here's a running example: https://gist.run/?id=4314bba289d20cf491eb82d5c620f9c0 You will note how I used the select attribute with css style selectors in the example. I also use the content element with no selector to show how it serves as a catch-all.

But yeah, this will be changing very soon. We're working on the implementation of slot right now.

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>

custom-element.html

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

custom-element.js

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

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

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

Oh, btw, you should refrain from creating custom elements that don't have a dash in their name (main doesn't have a dash) if you think you might ever want to use an Aurelia custom element as a Web Component custom element.