Bug when binding to objects using string keys (test case included)

[AlexanderDzhoganov]

We have discovered an issue when binding to nested objects using string keys. We run a relatively large app on Aurelia and this took us a while to discover and reproduce but we have nailed it down to a simple test case using the ES 2016 Kit from the Getting Started guide.

The code that triggers the bug is this:

app.js

export class App {
  foo = {
    bar: {
      baz: 3.1415
    }
  };

  indexVar = 'bar';
}

app.html

<template>
  <div if.bind="indexVar">
    ${foo[indexVar]['baz']}
  </div>

  <button type="button" click.delegate="indexVar = undefined">Unset</button>
</template>

If you click the button the following error is printed to Chrome's console:

Uncaught TypeError: Cannot read property 'baz' of undefined @ aurelia-task-queue.js:40

By changing the line

${foo[indexVar]['baz']}

to

${foo[indexVar].baz}

the issue disappears and the code works as expected.

[jdanyow]

Thanks for the clear steps to reproduce! Will get this fixed asap.

http://plnkr.co/edit/KD7GTO?p=preview