Ember 2.8:我应该随机化一个数组作为handlebars helper还是在服务器端编写一个函数?

Question

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

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

现在，我已经成功地在我的ember应用程序的服务器端代码中使用了这个函数，如下所示:

mirage config.js文件

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>

但我想知道如果它是更好地创建某种把手的帮助?我是ember的新手，但它看起来不太干净，让后端做那种逻辑。我是这么想的:

shuffle-array.js助手

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);

然后像这样使用它(试过了)。失败):

玩。哈佛商学院(修订)

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

所以我想我的问题是双重的:有这种逻辑来自海市蜃楼后端是可以接受的/不可接受的?另外，让handlebars helper实现这一点的最佳方式是什么?

Answer 1

这种逻辑来自于海市蜃楼后端是可以接受的还是不可接受的?

如果逻辑不是持久的，我会说不。

还有，让handlebars helper实现这个的最好方法是什么?

我更喜欢相关控制器上的computed属性。使用这个shuffle函数，它将是:

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

Answer 2

接受与否取决于您的需要。正如我从代码中看到的，您正在为某个游戏洗牌。出于安全考虑，您可能需要在后端执行此类操作。

但是使用helper也很好并且可以接受(但是具有编码能力的用户可以读取/操作数据)。关于帮助器的几个注意事项:

1. Helper函数有两个参数:未命名参数数组和已命名参数的散列。在你的代码中你将访问第一个参数array[0]

2. 你应该使用这样的帮助:

   {{#each (shuffle-array model.cards) as |instance|}}
     {{game-card symbol=instance.url}}
   {{/each}}
   

关于helper的更多信息

在另一个答案中提到的计算属性也适用于这类事情。也许更好，因为helper会在每次渲染时重新排列数组(即当用户来回导航时)，而computed prop只会在原始数组更改时才这样做。