Ember.js 接收更新时的余烬视图重新渲染

我正在Ember中创建一个实时应用程序

每次收到更新时，我都会执行以下操作：

 record = serializer.extractSingle(store, type, data);
 store.update(socketModel, record);

更新是一个

drawnNumbers

数组

在我看来，这种情况发生了

{{#each bingoCard in ownBingoCards}}
    <div class="col-sm-4">
        <div class="table-responsive">
            <span class="label label-primary">Card {{bingoCard.id}}</span>
            <table class="table table-bordered table-card">
                <tbody>
                {{#each row in bingoCard.squares}}
                <tr>
                    {{#each number in row itemController='number'}}
                    {{#if number}}
                    <td {{bind-attr class='isActive:active'}}>{{number.model}}</td>
                    {{else}}
                    <td>X</td>
                    {{/if}}
                    {{/each}}
                </tr>
                {{/each}}
                </tbody>
            </table>
        </div>
    </div>
{{/each}}

因此，每次将一个数字添加到

drawnNumbers

数组中时，它都会将

td

设置为

活动

---

唯一的问题是，我的整个视图重播使它非常滞后。但是，只要我刷新浏览器，它就会停止对整个视图重新排序，而只是将数字标记为“活动”。为什么会发生这种情况？为什么需要进行此刷新？

我猜它正在爆炸并重新创建整个

number

集合，这将使ember需要重新渲染整个集合。有多少个数字，每个数字中有多少个绑定数据点？数组从空开始，然后每次都接收一个新的数字，如下所示：

[1]

[1,5]

[1,5,60]

[1,5,60,50]

最多75个数字。一旦它收到第一个数字，它就会继续重新命名整个视图。在我刷新浏览器之前，我再也不会在该视图中重新渲染。我只是发现问题只存在于计算属性

ownbingoard

中。我已经更新了我的post，并发现了确切的问题。在刷新之前，每次更新

drawnNumbers

数组时都会调用

ownBingoCards

属性。在刷新之后，可能是这样的，但是当你创建一个过滤器时，它是长期存在的，所以每次你点击属性时，你都会创建一个新的过滤器，慢慢地，你会有一系列过滤器，每个过滤器都会迭代整个列表并更新它们的记录列表。这将被视为无意内存泄漏。

ownBingoCards: function () {
    var gameId, userId;
    gameId = this.get('id');
    userId = this.get('session.content.id');

    return this.get('store').filter('bingoCard', function (bingoCard) {
        return (bingoCard.get('game.id') === gameId && bingoCard.get('user.id') === userId);
    });
}.property('model.bingoCards', 'session.content'),