私はhttps://sean-hunter.io/2016/10/23/inter-component-communication-with-aurelia/を見つけました。親と子のテンプレート間で値の通信がどのように簡単にできるかを説明しています。AureliaJS - ループされた要素をテンプレート(値を渡す)に置き換えます
さて、私は連絡先マネージャーのチュートリアルにそれを適用しようとしている:https://github.com/aurelia/app-contacts/tree/master/srcにも
... - ループした連絡先項目に特に、私はできませんそれを働かせる。
gist.runで実行できる例を示しました(ただし、gist.runはFirefox 50ではなくChromeでしか動作しないようですが、gist.run/?id=
をgist.github.com/
に置き換えてコードを見てください) ):元の連絡先管理アプリ(作品)の
- コピー - アプリでhttps://gist.run/?id=c73b047c8184c052b4c61c69febb33d8
- 私の変化(動作しない) - https://gist.run/?id=47c4f1c053adbdf46f6a33413dd12d3d
は、これは私がやろうとしているものです。オリジナルの共同ntactsアプリは、正常に動作src/contact-list.html
でこれがある: - つまり、h4
とp
とa
-
<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
「ループ」の内側の要素を交換したいと新しいテンプレート。
import {bindable} from 'aurelia-framework';
export class ContactListItem {
@bindable theContact;
}
...としてsrc/contact-list.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
:
だから、私はsrc/contact-list-item.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
クラスのプロパティをとしましたと私はそれをrepeat.for="contact of contacts"
のルーパー変数であるcontact
にバインドしたいと思います。残念ながら、データは伝播されず(連絡先の名前が空であるため)、これは機能しません。また、新しいテンプレートでclick.delegate="$parent.select(contact)"
をclick.delegate="$parent.$parent.select(theContact)"
に変更した場合でも、連絡先のクリック数は拡大表示されません。
データを伝播するには、li
repeate.for
ループを新しい置換テンプレートにループさせ、新しいテンプレートのクリックに反応させるにはどうすればよいですか?
またおそらく関連を:http://stackoverflow.com/questions/36033773/what- aurelia-to-a-a-a-a-a-custom-element-using-repeat-for- – sdbbs