По умолчанию/Защищаемый контент для шаблона Aurelia (детали шаблона)

Question

Я пытаюсь окунуть пальцы в рамки Aurelia. Я пытаюсь создать повторно используемый компонент пейджера.

Есть ли способ предоставить некоторый контент по умолчанию, но разрешить его переопределить, если пользователь этого компонента желает?

Например, мой pager.html выглядит следующим образом:

<template> 
    <div class="pager-container"> 
    <content select="pager-beginning"></content> 
    </div> 
</template> 

мой пейджер beginning.html выглядит следующим образом:

<template> 
    <content> 
    <button type="button">|<</button> 
    </content> 
</template> 

---

Я думал, что я должен быть в состоянии сделать что-то вроде этого:

<template> 
    <require from="components/pager/pager"></require> 
    <pager></pager> 
</template> 

и имеют разметки производится выглядеть следующим образом:

<div class="pager-container"> 
    <button type="button">|<</button> 
</div> 

или в качестве альтернативы, я должен быть в состоянии сделать что-то вроде этого:

<template> 
    <require from="components/pager/pager"></require> 
    <pager> 
    <pager-beginning><button type="button"><i class="glyphicon glyphicon-step-backward"></i></button></pager-beginning> 
    </pager> 
</template> 

и разметка производится выглядеть следующим образом:

<div class="pager-container"> 
    <button type="button"><i class="glyphicon glyphicon-step-backward"></i></button> 
</div> 

Идея состоит в том, что я мог бы предоставить всю функциональность пейджера, всю логику, специфичную для пейджера, в моем файле pager.js и defa ult html, но затем разрешить пользователю компонента переопределять фрагменты html, если они того пожелают.

---

Что в настоящее время, кажется, происходит то, что разметка внутри пейджера-beginning.html <content></content> тега всегда получение заменить. Таким образом, я получаю разметки оказывается, что выглядит следующим образом:

<div class="pager-container"></div> 

Я не могу понять, как обеспечить его с этой функциональностью контента «по умолчанию».

Answer 1

Используйте функцию «Детали шаблона». Больше информации here (поиск по шаблонам).

pager.html

<template> 
    <div class="pager-container"> 
    <button type="button" click.delegate="gotoBeginning()"> 
     <template replaceable part="goto-beginning-button-content">|<</template> 
    </button> 
    </div> 
</template> 

app.html

<template> 
    <require from="./components/pager/pager"></require> 
    <pager> 
    <template replace-part="goto-beginning-button-content"> 
     <i class="glyphicon glyphicon-step-backward"></i> 
    </template> 
    </pager> 
</template>