Aurelia模板的默认/覆盖内容(模板部件)

Question

我正试着把脚趾伸进奥雷利亚框架里。我正在尝试创建一个可重用的寻呼机组件。

是否有提供一些默认内容的方法，但如果组件的用户愿意，则允许重写它吗？

例如，我的pager.html如下所示：

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

我的寻呼机-starning.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文件中特定于寻呼机的所有逻辑以及默认的html呈现，但如果组件的用户愿意，则允许他们覆盖html的各个部分。

目前似乎正在发生的是，寻呼机-starning.html <content></content>标记中的标记总是被替换。所以我得到了如下所示的标记：

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

我不知道如何为它提供“默认”内容功能。

Answer 1

使用“模板部件”功能。更多信息这里 (搜索“模板部件”)。

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>