Passing fragments HTML mutilple/autres composants à un composant

Question

Considérons un composant simple Aurelia:

export class FrameComponent 
{ 
    @bindable str1; 
    @bindable str2; 
} 

Et le modèle HTML correspondant:

<template> 
    ${str1} 
    ${str2} 
</template> 

Aussi simple que cela arrive. Maintenant, je peux utiliser ce composant dans un parent comme celui-ci:

<template> 
    <require from="./frame-component"></require> 
    <frame-component str1="Hello" str2="World"></frame-component> 
</template> 

Question 1

Et si je ne veux pas fournir le composant enfant uniquement des cordes simples, mais je veux mettre eux avec des fragments HTML?

Question 2

Que faire si le je veux passer des composants complets tout comme dans str1 et str2?

Answer 1

Voici une démonstration essentiel: https://gist.run/?id=0bf83980935015217cfb83250643c13f

Projection Contenu

Il applique pour questions 1 et 2. En utilisant des emplacements, vous pouvez définir le contenu de votre composant personnalisé de manière déclarative. Il peut également contenir d'autres composants personnalisés.

frame-slot.html

<template> 
    <div> 
    <slot name="str1">Default str1</slot> 
    </div> 

    <div> 
    <slot name="str2">Default str2</slot> 
    </div> 
</template> 

utilisation

dans app.html

<require from="./frame-slot"></require> 

<frame-slot> 
    <div slot="str1"><h3>${slotStr1}</h3></div> 
    <div slot="str2"> 
     <h3>${slotStr2}</h3> 
     <div> 
      <frame-slot></frame-slot> 
     </div> 
    </div> 
</frame-slot> 

Inline ViewStrategy

Il applique pour questions 1 et 2.

[Documentation] En utilisant InlineViewStrategy, vous pouvez définir des modèles comme variables de chaîne de caractères et l'afficher à l'aide de <compose> élément [Composition docs].

frame-inline.js

import { bindable, InlineViewStrategy } from 'aurelia-framework'; 

export class FrameInline { 
    @bindable template; 
    @bindable model; 

    viewStrategy; 

    attached() { 
    this.viewStrategy = new InlineViewStrategy(`<template>${this.template}</template>`); 
    } 
} 

frame-inline.html

<template> 
    <compose view.bind="viewStrategy" model.bind="model"></compose> 
</template> 

app.js

export class App { 

    inlineModel = { 
    name: "inline-template", 
    description: "This is an inline template", 
    slot: "Frame-slot Str1 content within frame-inline" 
    }; 

    inlineTemplate = '<require from="./frame-slot"></require>' + 
        '<div>${model.name}: ${model.description}</div>' + 
        '<br>' + 
        '<frame-slot>' + 
        '<div slot="str1">${model.slot}</div>' + 
        '</frame-slot>'; 
} 

app.html utilisation

dans

<require from="./frame-inline"></require> 
<frame-inline template.bind="inlineTemplate" model.bind="inlineModel"></frame-inline> 

InnerHTML liant

Il applique pour Question 1 seulement.

Vous pouvez lier du contenu à la propriété innerHTML d'un élément. Je mentionne cela, mais vous devriez l'utiliser avec prudence ou pas du tout.

[Documentation]

liaison en utilisant l'attribut innerHTML définit simplement la propriété innerHTML de l'élément. Le balisage ne passe pas par le système de gabarit d'Aurélia. Les expressions de liaison et les éléments require ne seront pas évalués.

<div innerHTML.bind="content | sanitizeHTML"></div>