Question

我在Ember.js中创建了一个实时多人文本游戏。到目前为止非常令人兴奋，但我遇到了一个小问题。

我有game模型，看起来有点像这样：

App.Game = DS.Model.extend({
    numbers: DS.attr(),
    drawnNumbers: DS.attr(), // array
    gameStatus: DS.attr(),
    table: DS.belongsTo('table'),
    bingoCards: DS.hasMany('bingoCard', { async: true })
});

我的控制器看起来像这样（遗漏了不必要的信息）：

App.GameController = Ember.ObjectController.extend({
    gameBingoCards: function () {
        var gameId;
        gameId = this.get('id');

        console.log("inside gameBingoCards");            

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

        console.log("inside ownBingoCards");          

        return this.get('store').filter('bingoCard', function (bingoCard) {
            return (bingoCard.get('game.id') === gameId && bingoCard.get('user.id') === userId);
        });
    }.property('gameBingoCards.[]'),

    gameMessages: function () {
        var gameId;
        gameId = this.get('id');

        console.log("gameMessages");

        return this.get('store').filter('message', function (message) {
            return (message.get('game.id') === gameId);
        });
    }.property('model.messages'),
});

在视图中我渲染卡片：

{{#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}}
                 <!-- displaying the numbers here -->
            {{/each}}
            </tbody>
        </table>
    </div>
</div>
{{/each}}

每当游戏更新时，我都会像这样更新商店：

record = serializer.extractSingle(store, type, data);
// record looks like this:
// {id: "538c56843800226245c3621a", gameStatus: "idle"} 
store.update("game", record);

如果我打开控制台，我会得到以下内容：

inside ownBingoCards GameController.js:102
inside gameBingoCards GameController.js:32
inside ownBingoCards GameController.js:102

注意：游戏在游戏过程中会收到很多更新，因此每次所有卡都会被重新渲染。我该如何防止这种情况？

编辑：

在我重新加载特定游戏路线上的页面后，它只会进入ownBingoCards和gameBingoCards一次，并且每次更新后都不会重新渲染。

EDIT2：

gameMessages属性也只被调用一次，为什么gameBingoCards会被调用？

Answer 1

好吧，我在无数个小时后修好了它。

我的路线看起来像这样：

model: function (params) {
    return this.store.find('game', params.game_id);
},
setupController: function (controller, model) {
    model.reload();

    controller.set('model', model);
},

我已将其更改为：

model: function (params) {
    return this.store.find('game', params.game_id);
},
setupController: function (controller, model) {
    model.reload();

    controller.set('model', model);
    controller.set('modelBingoCards', model.get('bingoCards'));
    controller.set('modelMessages', model.get('messages'));
},

另外，我还将属性侦听器更改为.property('modelMessages')和.property('modelBingoCards')。

请问有什么可行的吗？

Ember：store.update更新所有属性？

1 个答案: