Aurelia 模板的默认/可覆盖内容（模板部分）

Question

我正在尝试深入了解 Aurelia 框架。我正在尝试创建一个可重用的寻呼机组件。

有没有办法提供一些默认内容，但如果组件的用户愿意，可以覆盖它？

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

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

我的 pager-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 文件中特定于寻呼机的所有逻辑以及默认的 html 呈现，然后允许组件的用户覆盖html 如果他们愿意的话。

---

目前似乎正在发生的是 pager-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>