Question

我对这个问题很生气：我有一个模板组件，它使用{{#each}}循环来迭代一组注释;

comments: Ember.computed('commentsModel', function() {
    return this.get('commentsModel').toArray();
}),

actions: {
    addOne: function() {
        this.set('comments', [{content: 'agent k'}]);
    }
}

组件的调用方式如下：

{{photo-comments commentsModel=model.comments}}

路由的模型钩子返回model.comments的位置; 当我单击触发“addOne”事件的按钮时，模板正确更新，所有注释都被删除，只显示新注释“agent k”;

但是如果我想在comments数组中添加注释，而不是覆盖整个数组，它就不起作用; 我没有错误，但模板只是忽略它而不更新！

我尝试了推送：

actions: {
    addOne: function() {
        this.set('comments', this.get('comments').push({content: 'agent k'});
    }
}

使用pushObject：

actions: {
    addOne: function() {
        this.set('comments', this.get('comments').pushObject({content: 'agent k'});
    }
}

什么！既然这让我发疯了，有人能说出这有什么问题吗？

模板：

{{log comments}}
{{#each comments as |comment|}}
    <div class="card">
        <div class="card-content">
            {{comment.username}}<br>
            {{comment.content}}
        </div>
        <div class="card-action">
            {{comment.createdAt}}
        </div>
    </div>
{{/each}}

Answer 1

我认为这里的根本问题是您滥用Ember.computed helper。

您的组件应定义comments属性的默认值（如果有）：

comments: null,

actions: {
    addOne: function() {
        this.get('comments').pushObject({content: 'agent k'});
    }
}

您的模板应通过传递模型值来调用组件：

{{photo-comments comments=model.comments}}

当然假设model.comments可用，因为它是由路径的模型钩子检索的。

在您的示例代码中，您将尝试将新对象推送到包装模型的数组表示的计算属性，而不是将新值推送到模型本身。

Ember更新阵列不更新模板

1 个答案: