Question

我有一个函数，它接受一个数组并随机化其中的值。

shuffle([1,2,3,4]) => [2,4,1,3];

现在，我已经成功地在我的服务器端代码中使用了这个函数，就像我的ember应用程序一样：

mirage config.js file

this.get('/games/:id', function (db, request) {
    var game = games.find((game) => request.params.id === game.id);
    var cardsShuffled = shuffle(game.attributes.cards);
    game.attributes.cards = cardsShuffled;
    return {data: game};

  });

然后像我这样渲染我的把手视图：

play.hbs

<div>
  {{#each model.cards as |instance|}}
    {{game-card symbol=instance.url}}
  {{/each}}
</div>

但我想知道创建某种把手助手是否更好？我是个新手，但是对我来说看起来并不太干净，让后端做那种逻辑。所以这就是我的想法：

shuffle-array.js helper

import Ember from 'ember';

export function shuffleArray(array) {

  var m = array.length, t, i;

  while (m) {

    i = Math.floor(Math.random() * m--);

    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }
  return array;
};


export default Ember.Helper.helper(shuffleArray);

然后以某种方式使用它（试过这个。失败了）：

play.hbs（修订版）

<div>
  {{shuffle-array model.cards}}
  {{#each model.cards as |instance|}}
    {{game-card symbol=instance.url}}
  {{/each}}
</div>

所以我想我的问题是双重的：将这种逻辑来自海市蜃楼后端是否可接受/不可接受？另外，让车把帮手实现这个的最佳方法是什么？

Answer 1

这种逻辑来自海市蜃楼后端是否可以接受/不可接受？

如果逻辑不是坚持不懈的话，我会说不。

此外，让车把助手实施此操作的最佳方法是什么？

我更喜欢相关控制器上的计算属性。使用this shuffle function，它是：

import Ember from 'ember';

export default Ember.Controller.extend({
  shuffledCars: Ember.computed('model.cars.[]', function(){
    return shuffle(this.get('model.cars'));
  })
});

Answer 2

可接受与否取决于您的需求。正如我从代码中看到的那样，你正在为某些游戏洗牌。由于某些安全问题，您可能需要在后端执行此类操作。

但使用帮助程序执行此操作也很好并且可以接受（但具有代码功能的用户可以读取/操作数据）。关于助手的一些注意事项：

辅助函数有两个参数：未命名参数数组和命名参数哈希。因此，在您的代码中，您将访问第一个参数{{#each (shuffle-array model.cards) as |instance|}} {{game-card symbol=instance.url}} {{/each}}

你应该使用这样的助手：

$config['base_url'] = 'http://localhost/1/';

More about helpers

其他答案中提到的计算属性也适用于此类事物。也许更好，因为帮助器会在每次渲染时洗牌（即当用户来回导航时），而计算的道具只会在原始阵列发生变化时才会这样做。

Ember 2.8：我应该将数组随机化为把手助手还是在服务器端写一个函数？

2 个答案: