CODEWITHSUNDEEP
javascriptember.jsdata-binding
Kricket
Kricket

Reputation: 4179

Ember binding on custom objects

See twiddle here: https://ember-twiddle.com/2150099882893760cef237ff2bd22e85

Basically, in crit-service I create Ember Objects "Crits" and "Crit", and fill them with some data.

The crit-service is used by two different components, which basically do the same thing: display the Crits.

The problem is that the "change" buttons do not work. By debugging, I see that the values are changed, but the view is not updated. Why is this? Since Ember.Object is Observable, shouldn't setting a value notify the template? And most importantly, how can I get this to work?

P.S. I've seen a workaround by using Ember.A() instead of Objects. However, this would add boilerplate, as my data model is really objects and not arrays of key-value pairs.

Upvotes: 0

Views: 171

Answers (1)

Lux
Lux

Reputation: 18240

This seems to be an issue with the {{#each-in}} helper which does not reload on changes. A quick fix is to use the {{get}} helper.

So instead of this:

{{#each-in obj as |key val|}}
  {{key}}={{val}}
{{/each-in}}

Do this:

{{#each-in obj as |key|}}
  {{key}}={{get obj key}}
{{/each-in}}

However, this will never work if you add additional properties.

here is a working twiddle with that solution.

Another solution that will always work is to call .rerender() on the component. This is save thanks to glimmer, which does only update the parts of the DOM that have changed. However, you would have to call it on your common root component of the two components, or on both components.

Upvotes: 1

Related Questions