Framework: Converter doesn't detect change within object

[daveroberts]

I'm submitting a bug report

• Library Version:
  1.0.7
• Operating System:
  Linux (CentOS 6)
• Node Version:
  6.8.1
• NPM Version:
  3.10.8
• JSPM OR Webpack AND Version
  webpack 2.1.0-beta.22
• Browser:
  Firefox 45.4.0
• Language:
  ESNext

Current behavior:
In a view model, I bind to a property on an object

    <input type="text" value.bind="myobj.someproperty" />Value is: ${myobj | myconverter}

When the user types into the input box, the converter is not invoked.

Expected/desired behavior:
Expect the value to be updated

[EisenbergEffect]

Binding expressions only watch for changes in referenced properties. If you bind to myobj, you are telling us to watch for changes in the myobj property, not changes in all it sub properties. That is something we recommend avoiding if you want your application to perform well. If you nee this type of behavior, you would need to leverage the Binding Engine directly to observe whatever properties on the object you care about.

[daveroberts]

In Angular 1, you could write:

    <pre>{{myobj}}</pre>

And your page would show the JSON representation of the object, continually updated. Doing this is very helpful while writing an application, and you can remove the "debug" section from your template later.

I'm trying to accomplish something similar with Aurelia. By adding

    <pre>${myobj}</pre>

to the view template, the page would render [object Object]. My second attempt was to write a converter which would convert a JSON object to a string, but found that the converter wasn't being triggered (and hence the bug report above). In addition to objects it would also be helpful to turn arrays into strings and see their output. Perhaps there's an easier way to accomplish what I'm trying to do with similar results in Aurelia?

[AshleyGrant]

The reason Angular 1 could do that is that it had the digest cycle doing dirty checking. You could simulate that with a simple custom element. Check out the debug custom element here: https://gist.run/?id=07e645e46f7cc945b4e43c4ec80c6424 It just uses setInterval to constantly re-evaluate the JSON.

You can ignore the more complex stuff going on there w/the dynamically generated form. That's just part of the base gist I used to create this.

[StrahilKazlachev]

Create a property, not adding @computedFrom(), and return from it the object you want. Then bind against the property. Could even skip the converter 👇. I don't know other way to force dirty checking.

get objProp() { // bind against in view
   return JSON.parse(myObj);
}

[AshleyGrant]

Heh. Yeah, what @StrahilKazlachev shows works too, and is basically the same thing I'm saying to do, only a lot less code. kudos!

[EisenbergEffect]

Just bear in mind that Angular 1 had tons of performance issues because it did this. Aurelia tries to avoid those pitfalls. Definitely, don't put this in production :)

As a feature, we could add a custom debug element to our testing library that enabled output like this... Anyone want to PR that?

[Thanood]

You could also use a signal bindingBehaviour to force a string interpolation to update.

[daveroberts]

Thanks for all the help here. As a beginner, it just wasn't obvious to me what was happening. If a debug element were to be added to the library, I would have been just as confused since I wouldn't have know about it. I'm not sure what the right solution is here.