AureliaJS - 用模板替换循环元素（传递值？）

Question

我找到了https://sean-hunter.io/2016/10/23/inter-component-communication-with-aurelia/，它解释了如何在父模板和子模板之间进行简单的值通信。

现在，我正在尝试将其应用于联系人管理器教程：

• http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1

...也在https://github.com/aurelia/app-contacts/tree/master/src - 特别是循环联系人项目，但我无法让它工作。

我以 gist 为例，它可以在 gist.run 上运行（注意，gist.run 似乎只能在 Chrome 中工作，而不是在 Firefox 50 中 - 但你可以将 gist.run/?id= 替换为 gist.github.com/ 并查看在代码处）：

• 原始联系人管理器应用程序的副本（有效）-https://gist.run/?id=c73b047c8184c052b4c61c69febb33d8
• 我在应用程序中的更改（不起作用）-https://gist.run/?id=47c4f1c053adbdf46f6a33413dd12d3d

这就是我想要做的：在原来的联系人应用程序中，src/contact-list.html 中有这个可以正常工作：

<template>
  <div class="contact-list">
    <ul class="list-group">
      <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
        <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
          <h4 class="list-group-item-heading">${contact.firstName} ${contact.lastName}</h4>
          <p class="list-group-item-text">${contact.email}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

现在，我想用新模板替换“循环”li 的内部元素 - 即 a 和 h4 和 p。

所以，我发了src/contact-list-item.html：

<template>
  <a route-href="route: contacts; params.bind: {id:theContact.id}" click.delegate="$parent.$parent.select(theContact)">
    <h4 class="list-group-item-heading">${theContact.firstName} ${theContact.lastName}</h4>
    <p class="list-group-item-text">${theContact.email}</p>
  </a>
</template>

...和src/contact-list-item.js:

import {bindable} from 'aurelia-framework';

export class ContactListItem {
  @bindable theContact;
}

...并将src/contact-list.html 更改为：

<template>
  <require from="./contact-list-item"></require>

  <div class="contact-list">
    <ul class="list-group">
      <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
        <contact-list-item theContact.bind="contact"></contact-list-item>
      </li>
    </ul>
  </div>
</template>

基本上，我在contact-list-item 类中创建了一个名为theContact 的属性，我想将它绑定到contact，这是repeat.for="contact of contacts" 中的looper 变量——不幸的是，这不起作用，因为数据没有传播（因此联系人姓名为空）。此外，即使我在新模板中将click.delegate="$parent.select(contact)" 更改为click.delegate="$parent.$parent.select(theContact)"，联系人字段的点击也不会传播以显示详细信息。

为了让数据从 li repeate.for 循环传播到新的替换模板，我需要做什么，并让应用对新模板的点击做出反应？

Answer 1

快速回答：

在contact-list.html，更改：

<contact-list-item theContact.bind="contact"></contact-list-item>

到：

<contact-list-item the-contact.bind="contact"></contact-list-item>

说明：

HTML 不区分大小写，但惯例是只使用小写字母。为了尊重这一点，Aurelia 在与您的 HTML 代码交互时将所有 camelCase 变量转换为破折号参数和元素名称。

更多信息：

Dwayne Charrington 在这里写了一篇关于这个主题的好博客：

http://ilikekillnerds.com/2016/06/dont-get-skewered-kebab-case-aurelia/