CODEWITHSUNDEEP
javascriptember.js
Kricket
Kricket

Reputation: 4179

How to update nested object in Ember

I'm writing an application using EmberJS 2.4. I have the following service that generates objects of objects of random data:

export default Ember.Service.extend({
    crits: {},
    loadCrits() {
        var newCrits = {};
        var max = Math.random() * 10;
        for(var i=0; i<max; i++) {
            var crit = {};
            var num = Math.random() * 5;
            for(var j=0; j<num; j++) {
                crit["data"+j] = j;
            }

            newCrits["crit"+i] = crit;
        }

        this.set("crits", newCrits);
    }
});

I have a Component that displays the data in a table. For each key-value pair of each nested object, I have a button so that the user can change the value:

<table>
    {{#each-in critService.crits as |key crit|}}
    <tr>
        <td>key</td>
        <td><ul>
            {{#each-in crit as |k v|}}
                <li>
                    {{k}} = {{v}}
                    <button {{action "modifyCrit" crit k}}>change</button>
                </li>
            {{/each-in}}
        </ul></td>
    </tr>
    {{/each-in}}
</table>

The component handles the action thusly:

export default Ember.Component.extend({
    critService: Ember.inject.service(),
    actions: {
        modifyCrit(crit, k) {
            Ember.set(crit, k, "new value");
        }
    }
});

The problem is that the view is not updated. If I understand correctly, this is because Ember doesn't know how to link the "crit" nested object with the "critService" from which is came. There is thus no event/observer triggered that would update the view.

How can I modify this so that when the user clicks the button, the view is updated with the new value?

Upvotes: 1

Views: 586

Answers (1)

Ebrahim Pasbani
Ebrahim Pasbani

Reputation: 9406

You need to change data structure. I provide you a twiddle. Please check out this twiddle

Upvotes: 1

Related Questions