Button-Element wird nicht angezeigt, wenn Aurelia benutzerdefinierte Element als Eltern verwenden

Question

Ich versuche, ein benutzerdefiniertes Containerelement zu erstellen, um einige untergeordnete Schaltflächenelemente zu verfolgen. Das Problem ist, dass die Schaltflächen nicht auf der Webseite angezeigt werden, wenn ich dies tue. Was mache ich falsch? Ich versuche auch, den aurelia @children-Dekorator zu benutzen, um die Knöpfe in meinem Behälteransicht-Modell zu haben, aber das scheint auch nicht zu arbeiten. Bitte helfen Sie!

Wenn ich die Schaltflächenelemente aus dem benutzerdefinierten Hauptelement verschieben, werden sie angezeigt.

Meine benutzerdefinierte Element Ansicht main.html

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

benutzerdefinierte Ansicht-Modell 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

DIESE AN SWER ist außer Betrieb !!!

Bitte überprüfen Sie die Aurelia Dokumentation für die aktuelle Antwort hier: http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-content-projection

---

Sie benötigen das <content></content> Element in Ihrem benutzerdefinierten Element Ansicht Datei aufzunehmen. Wenn Sie nur button Elemente angezeigt werden sollen, die für das benutzerdefinierte Element in den Inhalt, dann verwenden <content select="button"></content>

Bitte beachten Sie, dass dies die genannten Slots mit Standard, dass die Schatten DOM-Spezifikation hat sich geändert in Aurelia RC1 sich ändern (obwohl derzeit kein Browser es unterstützt).

Hier ist ein laufendes Beispiel: https://gist.run/?id=4314bba289d20cf491eb82d5c620f9c0 Sie werden feststellen, wie ich das select Attribut mit Css Stil Selektoren in dem Beispiel verwendet. Ich verwende auch das content Element ohne Selektor, um zu zeigen, wie es als Catch-All dient.

Aber ja, das wird sich sehr bald ändern. Wir arbeiten gerade an der Implementierung von 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> 

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, wodurch du das Erstellen von benutzerdefinierten Elemente verzichtet werden soll, dass Haben Sie keinen Strich in ihrem Namen (main hat keinen Bindestrich), wenn Sie denken, dass Sie jemals verwenden möchten ein benutzerdefiniertes Aurelia-Element als benutzerdefiniertes Webkomponentenelement.