CODEWITHSUNDEEP
javascriptaurelia
suamikim
suamikim

Reputation: 5319

Aurelia simple binding is not working

I have a very simple binding which isn't working as I'd expect it to:

app.js: 

export class PupilsViewer {

    pupilsInfo = [
        { name: 'John' },
        { name: 'Eric' },
        { name: 'Martin' },
        { name: 'Simon' }
    ];

}

app.html:

<template>
    <require from="./pupil"></require>
    <pupil repeat.for="pupilInfo of pupilsInfo" info="${pupilInfo}"></pupil>
</template>

pupil.js:

import {bindable} from 'aurelia-framework';

export class Pupil {
    @bindable info = { name: 'unknown' };
}

pupil.html:

<template>
    <div>Name: ${info.name}</div>
</template>

This results in the following output:

Name: unknown
Name: unknown
Name: unknown
Name: unknown

whilst I'd have expected:

Name: John
Name: Eric
Name: Martin
Name: Simon

Upvotes: 1

Views: 1824

Answers (1)

boblgum
boblgum

Reputation: 36

right now i had the same problem. it seems to be a typo-problem. try to change or remove camel-case for your bindables. but your binding is also not ok.

export class PupilsViewer {

    pupils = [
        { name: 'John' },
        { name: 'Eric' },
        { name: 'Martin' },
        { name: 'Simon' }
    ];

}

app.html

<template>
    <require from="./pupil"></require>
    <pupil repeat.for="pupil of pupils" info.bind="pupil"></pupil>
</template>

pupil.js

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

@customElement('pupil')
@bindable('info')
export class Pupil {

}

Upvotes: 2

Related Questions