将组件的模型作为插槽提供 [英] Providing the model for a component as a slot

问题描述

请考虑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中的广告位提供模型?

下面是一个要旨，以演示实际问题.

解决方案

插槽无法满足您的需求.这是Aurelia中插槽的已知限制.无法动态生成插槽(例如在转发器内部).

幸运的是，还有另一种方法可以完成您想要的工作:模板零件.

模板部分没有很好的文档记录(我的错，我应该为它们编写文档).但是我们的速查表中有一些文档.我已经修改了要点，以显示如何使用它们: 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>

Consider the following two custom elements in Aurelia (list & row):

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"}];
}

The app will tie them together:

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"}];
}

The problem is that the model for the row is not set correctly. All I get as the output is the following:

The List
  1.
  2.
  3.

So the question is; how can I provide the model for a slot in Aurelia?

Here's a Gist to demonstrate the problem in action.

解决方案

Slots aren't going to work for what you want to do. It's a known limitation of slots in Aurelia. Slots can't be dynamically generated (such as inside a repeater).

Luckily, there's another option to accomplish what you want: template parts.

Template parts aren't well documented (my fault, I should have written the docs for them). But we have some docs in our cheat sheet. I've modified your gist to show how to use them: https://gist.run/?id=1c4c93f0d472729490e2934b06e14b50

Basically, you'll have a template element in your custom element's HTML that has the replaceable attribute on it along with a part="something" attribute (where something is replaced with the template part's name. Then, when you use the custom element, you'll have another template element that has the replace-part="something" attribute (again, where something is replaced with the template part's name). It looks like this:

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>

这篇关于将组件的模型作为插槽提供的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！