如何在Ember中更新嵌套对象

debugcn 发表于 Dev

蟋蟀

我正在使用EmberJS 2.4编写应用程序。我有以下服务，可生成随机数据对象的对象：

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);
    }
});

我有一个在表中显示数据的组件。对于每个嵌套对象的每个键值对，我都有一个按钮，以便用户可以更改值：

<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>

该组件将按以下方式处理操作：

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

问题是该视图未更新。如果我理解正确，这是因为Ember不知道如何将“ crit”嵌套对象与来自其的“ critService”链接。因此，没有触发任何事件/观察者将更新视图。

我该如何修改它，以便当用户单击按钮时，视图将用新值更新？

易卜拉欣·帕斯巴尼（Ebrahim Pasbani）

您需要更改数据结构。我给你打个电话。请检查这个旋转

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。