Default/Overridable 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 文件中提供寻呼机的所有功能，所有特定于寻呼机的逻辑和默认的 html 呈现，然后允许如果需要，组件的用户可以覆盖 html 的片段。

目前似乎正在发生的事情是 pager-beginning.html <content></content> 标签内的标记总是被替换。所以我得到的标记呈现如下所示：

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

我不知道如何为它提供 'default' 内容功能。

Answer 1

使用"template parts"功能。更多信息 here（搜索 "template parts"）。

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>

Default/Overridable Aurelia 模板的内容（模板部分）

Default/Overridable content for Aurelia template (template parts)

javascript

aurelia