Ember's ability to bind custom objects in a unique way

Question

Ember's ability to bind custom objects in a unique way

Take a look at this twiddle:

Essentially, in my `crit-service`, I am creating Ember Objects called "Crits" and "Crit", and populating them with data.

The `crit-service` is being utilized by two different components that have similar functionalities: displaying the Crits.

The issue I'm facing is that the "change" buttons are not functioning as expected. Even though I can see through debugging that the values are being changed, the view does not reflect these updates. Why is this happening? Shouldn't updating a value in an Observable Ember Object automatically notify the template of the changes? And most importantly, how can I resolve this problem?

P.S. I've come across a workaround involving the use of Ember.A() instead of Objects. However, this approach would introduce unnecessary boilerplate since my data model primarily consists of objects rather than arrays of key-value pairs.

javascript ember.js data-binding

Answer 1

Answer №1

This issue appears to be related to the {{#each-in}} helper not refreshing on changes. A simple workaround is to utilize the {{get}} helper instead.

Instead of:

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

Try this:

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

Keep in mind that this approach may not handle additional properties being added.

Check out this functional twiddle with the fix implemented.

An alternative solution that will consistently work is to execute .rerender() on the component. This method leverages glimmer, which only updates specific parts of the DOM that have changed. Just remember to invoke it on the shared root component or both individual components.

Answer 2

This issue appears to be related to the {{#each-in}} helper not refreshing on changes. A simple workaround is to utilize the {{get}} helper instead.

Instead of:

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

Try this:

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

Keep in mind that this approach may not handle additional properties being added.

Check out this functional twiddle with the fix implemented.

An alternative solution that will consistently work is to execute .rerender() on the component. This method leverages glimmer, which only updates specific parts of the DOM that have changed. Just remember to invoke it on the shared root component or both individual components.

Ember's ability to bind custom objects in a unique way

Answer №1

Similar questions

What is the best way to alter something based on the current date?

Using .prev in conjunction with a Meteor event

JSON Schema: ensuring that all elements within an array are distinct and not null

Is there a different way to invoke PHP within JavaScript?

Retrieving JSON data by parsing through specific keys$values

When using Vue.js, the v-bind:class directive can be applied when an array is present and contains a specific

Display Vue component using a string input

Node.js, Express continues to execute an if statement even if the condition is false

Implement a function to delete an item from an array within a React object by utilizing the UseState hook

Conceal a div element dynamically when clicking on another div

Sending documents via ExpressJS

What is the best way to invoke a Service from a Directive in AngularJS?

What is the best method for connecting my HTML to jQuery code?

Running a code from a plugin in Wordpress site

Encountering a 'TypeError: app.address is not a function' error while conducting Mocha API Testing

If the <span> element contains text, then apply a class to the <i> element

What is the best way to conceal the button?

Having trouble creating an angularjs table using ng-repeat in the controller?

What issue is being encountered with this JavaScript generated by PHP?

How to integrate a custom service worker in create-react-app without the need for ejecting