CODEWITHSUNDEEP
javascriptaurelia
sdbbs
sdbbs

Reputation: 5384

AureliaJS - replacing looped elements with a template (passing values?)

I have found https://sean-hunter.io/2016/10/23/inter-component-communication-with-aurelia/ where it is explained how simple communication of values can be made between a parent and a child template.

Now, I'm trying to apply that to the contact manager tutorial:

... also on https://github.com/aurelia/app-contacts/tree/master/src - in particular to the looped contact items, but I cannot get it to work.

I have made gists as an example, which can run on gist.run (note, gist.run seems to only work in Chrome, not in Firefox 50 yet - but you can replace gist.run/?id= with gist.github.com/ and look at the code):

This is what I'm trying to do: in the original contacts app, there is this in src/contact-list.html which works fine:

<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>

Now, I'd like to replace the inner elements of the "looped" li - that is, the a with the h4 and the p - with a new template.

So, I made 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>

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

import {bindable} from 'aurelia-framework';

export class ContactListItem {
  @bindable theContact;
}

... and changed src/contact-list.html as:

<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>

Basically, I've made a property in the contact-list-item class called theContact, and I'd like to bind it to the contact which is the looper variable in the repeat.for="contact of contacts" -- unfortunately, this doesn't work, as the data is not propagated (and so the contact names are empty). Also, the clicks on contact fiels do not propagate to show the details, even if I've changed click.delegate="$parent.select(contact)" to click.delegate="$parent.$parent.select(theContact)" in the new template.

What do I have to do, in order to have the data propagate form the li repeate.for loop, down to the new replacement template - and to have the app react on clicks on the new template?

Upvotes: 1

Views: 62

Answers (1)

LStarky
LStarky

Reputation: 2777

Quick answer:

In contact-list.html, change:

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

to:

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

Explanation:

HTML is not case-sensitive, but the convention is to use only lower-case letters. To respect that, Aurelia converts all camelCase variables to dash-case parameters and element names when interfacing with your HTML code.

More Information:

Dwayne Charrington wrote a good blog about this topic here:

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

Upvotes: 2

Related Questions