Aurelia custom element binding

Question

I'm trying to build a custom element in Aurelia. At this point, this is what I have:

item.html

<template>
    <span>${someProperty}</span>
</template>

item.ts

import {bindable} from 'aurelia-framework';
class Item {
    @bindable someProperty: string;
}

parent.html

<template>
<require from="./item"></require>
<item repeat.for="item of items"></item>
</template>

parent.ts

class Parent {
    items: Item[];

    loadItems() {
        // at this point, I'm sure that items is getting populated.
        this.items = dataservice.loadItems();
    }
}

I can't seem to find anything in the documentation that covers this scenario. What I'm getting, is that the span is empty. I'm not getting any errors in the console. Am I going about this the right way?

Answer 1

You need to bind to the item's someProperty. The following assumes that items[] is an array of strings.

<div repeat.for="item of items">
    <item someProperty.bind="item"></item>
</div>

Sorry about the formatting, I'm on my phone.

Answer 2

You need to use the custom element and the bindable property. You also need to register the class as a custom element. Try this:

item.html

<template>
    <span>${someProperty}</span>
</template>

item.js

import {bindable, customElement} from 'aurelia-framework';

@customElement('item')
class Item {
    @bindable someProperty: string;
}

parent.html

<template>
    <require from="./item"></require>
    <item repeat.for="item of items" someProperty.bind="item"></item>
</template>

parent.ts

class Parent {
    items: Item[] = [
        'trees',
        'swans',
        'capes',
        'a horse',
        'triangles',
        'witches',
        'a different horse'
    ];
}

For more information, take a look at a few of my blogs on custom elements and custom attributes like this one: http://davismj.me/blog/semantic-custom-element/