Question

我正在前端使用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}}

基本上我的问题是：我有多个游戏，每个游戏都有多个bingoCards。我想基于bingoCards计算每场比赛的属性。我怎么能这样做？

Answer 1

您必须指定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

上详细了解相关信息

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

1 个答案: