Ember 2.8: Should I randomize an array as a handlebars helper or write a function in the server side?

Question

I have a function that takes in an array and randomizes the values inside of it.

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

Now, I have succesfully used this function in my server side code for my ember app like so:

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

  });

And then rendering my handlebars view like so:

play.hbs

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

But I was wondering if it is better to create some sort of handlebars helper? I'm new to ember, but it doesn't look too clean to me to have the backend do that kind of logic. So here's what I was thinking:

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

And then somehow use it like so (tried this. failed):

play.hbs (revised)

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

So I guess my question is two-fold: Is it acceptable/unnaceptable to have this kind of logic coming from the mirage backend? Also, what is the best way to have a handlebars helper implement this?

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

Is it acceptable/unnaceptable to have this kind of logic coming from the mirage backend?

If the logic isn't meant to be persistent, I'd say no.

Also, what is the best way to have a handlebars helper implement this?

I'd prefer a computed property on the relevant controller. Using this shuffle function, it'd be:

import Ember from 'ember';

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

edited May 23 '17 at 10:34

Community

1
1

answered Oct 08 '16 at 21:33

mreq

6,414
4
37
57

After reading up on yours and the other poster's suggestions, I went with a computed property. Thank you very much. – Giancarlo Manuel Guerra Salvá Oct 08 '16 at 21:52
I think the correct dependency key is `model.cars.[]`, because you need to reshuffle if items are added to the array. – Lux Oct 09 '16 at 02:08

Gennady Dogaev · Answer 2 · 2016-10-08T21:46:00.483

Acceptable this or not depends on your needs. As I can see from code, you are shuffling some cards for some game. It possible that you need to do such kind of things on backend because of some security concerns.

But doing it with helper is also good and acceptable (but user with abilities to code can read/manipulate data). A few notes about helpers:

Helper function have two parameters: array of unnamed parameters and a hash of named parameters. So in your code you will access first parameter as array[0]

You should use helpers like this:

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

More about helpers

Computed properties, mentioned in other answer, also are good for such kind of things. Maybe even better, because helper will shuffle array on each rendering (i.e. when user navigates back and forth), while computed prop will do that only when original array changes.

Ember 2.8: Should I randomize an array as a handlebars helper or write a function in the server side?

2 Answers2