Aurelia binding in repeat.for not working

Question

I am trying to just set a bindable value on an aurelia component in a repeat.for and it does not seem to have any affect.

<event-summary repeat.for="event of events" event.bind="event" is-favorite="true"></event-summary>

and in the view-model

event-summary.js

@bindable('isFavorite')
@bindable('event')
export class EventSummary {
    bind(bindingContext) {
        if(bindingContext.isFavorite == null) {
            this.isFavorite = false;
        }
    }
}

event is set correctly, but isFavorite is always undefined no matter what I try (is-favorite.bind="[some vm value]") also returns undefined. Can anyone tell me why?

Thanks

Answer 1

is-favorite.bind="true" should work. is-favorite="true" should also work although the isFavorite bindable property will be assigned the string 'true' in this case. Here's a runnable example of both: https://gist.run/?id=7044b0c37b53bb66e833d461f41dae2f

Answer 2

I never used the bind() function but normally you have isFavorite on your scope like this.isFavorite . And you could do the null check also in the constructor

this is working for me:

import {bindable} from 'aurelia-framework';

export class Testelement {

    @bindable item
    @bindable isFavorite
    constructor() {
        console.log(this.isFavorite);
        console.log(this.item);
    }

    bind(bindingContext, overrideContext) {
        console.log("bc ", bindingContext); //no item or isFavorite defined here
        console.log("oc ", overrideContext);//no item or isFavorite defined here
    }
}


<testelement item.bind="element" repeat.for="element of data" is-favorite="true"></testelement>