2016-12-19 3 views
1

私は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/に置き換えてコードを見てください) ):元の連絡先管理アプリ(作品)の

は、これは私がやろうとしているものです。オリジナルの共同ntactsアプリは、正常に動作src/contact-list.htmlでこれがある: - つまり、h4pa -

<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)"に変更した場合でも、連絡先のクリック数は拡大表示されません。

データを伝播するには、lirepeate.forループを新しい置換テンプレートにループさせ、新しいテンプレートのクリックに反応させるにはどうすればよいですか?

+0

またおそらく関連を:http://stackoverflow.com/questions/36033773/what- aurelia-to-a-a-a-a-a-custom-element-using-repeat-for- – sdbbs

答えて

2

クイック答え: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変数をダッシュ​​ケースのパラメータと要素名に変換します。

詳細情報:

ドウェインCharringtonはここに、このトピックについての良いブログを書きました:

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

+0

ああ、うわー - 私は決してこれを期待していないだろう。多くのおかげで@ LStarky!実際、私は 'contact-list-item.html'と' contact-list-item.js'の 'theContact'を' thecontact'に置き換えました。そして、 'contact-list.html ' '**まだ**は' 'を持っています。クリックイベントも機能します!変更された作業コードは次のとおりです。https://gist.run/?id=766cdd682b215a10ad9d7913ecd8d119 – sdbbs

+1

うまくいけばうれしいです。重要なことは、JavaScript、HTML、Aureliaが変数、要素、プロパティをどのように処理するかを覚えておくことです。 – LStarky

関連する問題