Using Aurelia, is it possible to use a variable name to dynamically reference a model object's property name?

Javascript:

dow = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
test = {
    monday:     false,
    tuesday:    false,
    wednesday:  false,
    thursday:   false,
    friday:     false,
};

HTML:

<label repeat.for="day of dow"><input type="checkbox" class="form-control" checked.bind="test[day]" />${day}</label>

This results in: "TypeError: obj is undefined"

Using Aurelia, is it possible to use a variable name to dynamically reference a model object's property name?

Javascript:

dow = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
test = {
    monday:     false,
    tuesday:    false,
    wednesday:  false,
    thursday:   false,
    friday:     false,
};

HTML:

<label repeat.for="day of dow"><input type="checkbox" class="form-control" checked.bind="test[day]" />${day}</label>

This results in: "TypeError: obj is undefined"

• javascript
• aurelia

1 Answer 1

According to the Aurelia Docs:

Each item that is being repeated by the repeat attribute has several special contextual values available for binding:

$parent - At present, the main view model's properties and methods are not visible from within the repeated item. We hope to remedy this in an update soon. For the mean time, you can access that view-model with $parent.

$index - The index of the item in the array.

$first - True if the item is the first item in the array.

$last - True if the item is the last item in the array.

$even - True if the item has an even numbered index.

$odd - True if the item has an odd numbered index.

It worked after updating the HTML to reference parent.new_deal[day]:

<label repeat.for="day of dow"><input type="checkbox" class="checkbox-inline" checked.bind="$parent.new_deal[day]" />${day}</label>