read dependencies are only created for mentioned properties

[kicsiede]

hello,

i have the following template & code snippet:

<img repeat.for="part of parts" src.bind="$parent.currentMode.template.replace('${id}', part.id)"></img>
<img repeat.for="part of parts" src.bind="$parent.getUrlFor(part.id)"></img>

getUrlFor(id) { return this.currentMode.template.replace('${id}', id); }

once i update currentMode, only the src attributes of the first img-sequence is updated. it seems that the invocation of getUrlFor will not create a dependency on currentMode for the binding, but only those properties that are mentioned inside the invocation block. so the following workaround works:

<img repeat.for="part of parts" src.bind="$parent.getUrlFor2($parent.currentMode, part.id)"></img>

getUrlFor2(mode, id) { return mode.template.replace('${id}', id); }

i would expect the same behavior in each cases. if this is the expected behavior, it should be pointed out in the docs. however this can lead to really ugly and tedious to maintain templates pretty quickly imho.

[jdanyow]

This is the expected behavior. We're experimenting with reflecting on property-getter/method internals to determine what properties to observe for changes. See the aurelia-computed plugin for more details.

You could use a converter to make your markup a little bit cleaner:

export class PartToUrlValueConverter {
  toView(part, mode) {
    return mode.template.replace('${id}', part.id);
  }
}

<img repeat.for="part of parts" src.bind="part | partToUrl : $parent.currentMode"></img>

thoughts?