Question

我已经问过another question而非接近这个（只是因为他们不会混淆）。在这里，我并没有尝试动态生成插槽。

因此，请考虑父组件和子组件，它由其父级移交给父组件。我想知道如何通过其父组件为子组件（插槽）设置模型。以下是解释问题的代码（也是in Gist）：

child.js

import { bindable } from 'aurelia-framework';

export class Child
{
  @bindable
  name = "** child's model is not set **";
}

child.html

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

parent.js

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

parent.html

<template>
  The Parent
  <ul>
    <slot name="childComponent" model.bind="rows[0]"></slot>
  </ul>
</template>

当然，app根组件将所有东西粘合在一起：

app.js

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

app.html

<template>
  <require from="./parent"></require>
  <require from="./child"></require>

  <parent rows.bind="users">
    <child slot="childComponent"></child>
  </parent>

  <input value.bind="users[0].name">
</template>

我的问题是，没有为子组件设置model。

Answer 1

model是compose元素上的可绑定属性，而不是slot元素上的可绑定属性。 polyfill主要在此文件中实现：https://github.com/aurelia/templating/blob/master/src/shadow-dom.js#L122如果您使用Ctrl-F表示“model”，您甚至无法在文件中找到该单词。

如何通过父组件设置子槽的模型

1 个答案: