当对象（字典）发生变化时如何重新渲染？

Question

我有以下.hbs

<button {{action "addToObject"}}>
    Add to Object
</button>

<br />

{{#each this.sortedDictionary as |item|}}
    {{item.name}}<br />
{{/each}}

及其相应的 .js 代码：

import Component from '@ember/component';
import EmberObject, {set, computed, observer} from '@ember/object';

export default Component.extend(
{
    myDictionary: null,
    counter: 0,



    init()
    {
        this._super( ...arguments );

        console.log( "test-comp init" );

        this.myDictionary = {};

        set( this.myDictionary, "hello", "42" );
    },



    sortedDictionary: computed( 'myDictionary', function()
    {
        let sortedDictionary = [];

        if ( this.myDictionary ) 
        {
            const keys = Object.keys( this.myDictionary );

            keys.sort();

            console.log( "test-comp keys", keys );

            sortedDictionary = keys.reduce( ( sorted, itemName ) => 
            {
                const value = 
                {
                    name: itemName,
                    ...this.myDictionary[ itemName ]
                }

                sorted.push( value );

                return sorted;
            }, []);
        }

        console.log( "test-comp sortedDictionary", sortedDictionary );

        return sortedDictionary;
    }),



    actions:
    {
        addToObject()
        {
            set( this.myDictionary, `hello${this.counter}`, "42" );

            this.counter++;

            console.log( "test-comp addToObject", this.myDictionary );
        }
    }
});

在我看来，当我按下 添加到对象 按钮时，我的 .hbs 应该会重新呈现。然而，事实并非如此。

我假设这是因为 sortedDictionary 没有重新计算并且无法检测到 myDictionary 已经改变。

这个问题的正确解决方法是什么？

Answer 1

在您的 ember 计算函数中，唯一的依赖项是 myDictionary。所以 computed 只会触发对 myDictionary 对象的引用更改。您可以通过调用字典事件更改或添加另一个在触发操作时更改的依赖项来调整它（在您的示例中，counter）。如果您使用 counter 作为计算属性的依赖项，则必须使用 set 函数来触发依赖项更改。

除此之外，hbs 不需要 this 来获得 myDictionary，因为它使用相关组件作为其上下文

当对象（字典）发生变化时如何重新渲染？

How can I rerender when object (a dictionary) changes?

ember.js

computed-observable

computed-properties

ember-classic