Question

考虑Aurelia中的以下两个自定义元素（列表和行）：

row.html

<template>
  <span>${name}</span>
</template>

row.js

export class Row
{
  name = "Marry";
}

list.html

<template>
  The List
  <ol>
    <li repeat.for="r of rows">
      <slot name="rowItem" model.bind="r"></slot>
    </li>
  </ol>
</template>

list.js

import { bindable } from 'aurelia-framework';

export class List
{
    @bindable
    rows = [{name: "John"}];
}

app将它们捆绑在一起：

app.html

<template>
  <require from="./list"></require>
  <require from="./row"></require>

  <list rows.bind="users">
    <row slot="rowItem"></row>
  </list>
</template>

app.js

export class App
{
  users = [{name: "Joe"}, {name: "Jack"}, {name: "Jill"}];
}

问题是row的模型设置不正确。我得到的所有输出如下：

The List
  1.
  2.
  3.

所以问题是;如何在Aurelia中为插槽提供模型？

在这里a Gist展示行动中的问题。

Answer 1

插槽无法满足您的需求。这是Aurelia插槽的一个已知限制。无法动态生成插槽（例如在转发器内）。

幸运的是，还有另一种选择可以达到你想要的效果：模板部件。

模板部件没有很好的记录（我的错，我应该为他们编写文档）。但是我们在cheat sheet中有一些文档。我已经修改了你的要点以展示如何使用它们：https://gist.run/?id=1c4c93f0d472729490e2934b06e14b50

基本上，您的自定义元素HTML中包含一个模板元素，其中包含replaceable属性以及part="something"属性（其中something替换为模板部分的然后，当你使用自定义元素时，你将拥有另一个具有replace-part="something"属性的模板元素（同样，something被替换为模板部分的名称）。它看起来像这样：

list.html

<template>
  The List
  <ol>
    <li repeat.for="row of rows">
      <template replaceable part="row-template">
        ${row}
      </template>
    </li>
  </ol>
</template>

app.html

<template>
  <require from="./list"></require>
  <require from="./row"></require>

  <list rows.bind="users">
    <template replace-part="row-template">
      <row name.bind="row.name"></row>
    </template>
  </list>
</template>

将组件的模型提供为插槽

1 个答案: