javascript - AureliaJS-用模板替换循环元素(传递值？)

我发现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循环传播到新的替换模板，并使应用对新模板的点击做出反应，我该怎么办？

最佳答案

快速回答：

在contact-list.html中，更改：

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

至：

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

说明：

HTML不区分大小写，但惯例是仅使用小写字母。为此，当与HTML代码连接时，Aurelia会将所有camelCase变量转换为破折号参数和元素名称。

更多信息：

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

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