正在游戏控制器中获取计算属性

Getting computed property in games controller

本文关键字：获取 计算 属性 控制器 游戏      更新时间：2023-09-26

我正在前端使用ember创建一个小型多人游戏。

我在主页上有一个游戏列表，我想显示一个游戏中有多少张牌。

App.Game = DS.Model.extend({
    serverSeedHash: DS.attr(),
    serverSeed: DS.attr(),
    table: DS.belongsTo('table'),
    bingoCards: DS.hasMany('bingoCard')
});
App.BingoCard = DS.Model.extend({
    player: DS.attr(),
    clientSeed: DS.attr(),
    game: DS.belongsTo('game'),
    player: DS.belongsTo('player')
});
App.GamesRoute = Ember.Route.extend({
    model: function () {
        return Ember.RSVP.hash({
            games: this.store.find('game'),
            bingoCards: this.store.find('bingoCard')
        });
    },
    setupController: function (controller, model) {
        controller.setProperties(model);
    }
});
App.GamesController = Ember.ArrayController.extend({
    needs: ['game']
});
App.GameController = Ember.ObjectController.extend({
    amountOfCards: function () {
        return this.get('bingoCards.length');
    }.property('bingoCards.@each')
});

每当我去一个特定的游戏时，我都可以通过在游戏模板中键入{{amountOfCards}}来访问amountOfCards属性。

然而，当我试图在主页上显示它时，它在每个循环中都不起作用。

{{#each game in games}}
<tr>
    <td>{{game.id}}</td>
    <td>{{amountOfCards}} {{game.amountOfCards}}</td>
    <td>{{#link-to 'game' game.id}}Join{{/link-to}}</td>
</tr>
{{/each}}

基本上我的问题是：我有多个游戏，每个游戏都有多张宾果卡。我想根据宾果卡计算每个游戏的属性。我该怎么做？

您必须指定一个itemController，它将把每个单独的游戏包装到您选择的控制器（通常是ObjectController）中。

模板

{{#each game in controller}}
<tr>
    <td>{{id}}</td>
    <td>{{amountOfCards}}</td>
    <td>{{#link-to 'game' id}}Join{{/link-to}}</td>
</tr>
{{/each}}

路线

App.GamesRoute = Ember.Route.extend({
    model: function() {
        return Ember.RSVP.all([
            this.store.find('game'),
            this.store.find('bingoCard')
        ]);
    },
    setupController: function(controller, model) {
        var games = model[0];
        controller.set('content', games);
    }
});

控制器

App.GamesController = Ember.ArrayController.extend({
    itemController: 'game'
});
App.GameController = Ember.ObjectController.extend({
    amountOfCards: function () {
        return this.get('bingoCards.length');
    }.property('bingoCards.@each', 'bingoCards.length')
});

您可以在Ember API 上阅读更多关于它的信息

相关文章：