javascript - 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 上- 特别是循环的联系人项目，但我无法让它工作。

我以 gists 为例，它可以在 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>

现在，我想用 h4 替换“循环”li 的内部元素 - 即 a和 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 的属性，我想将它绑定(bind)到 contact 这是 repeat.for="contact of contacts" 中的循环变量——不幸的是，这不起作用，因为数据没有传播(因此联系人姓名是空的)。此外，即使我将 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 代码交互时将所有驼峰式变量转换为破折号式参数和元素名称。

更多信息:

Dwayne Charrington 在此处写了一篇关于此主题的精彩博客:

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