Newline in Ember handlebars helper?

Question

I am still a little fuzzy on how to use this helper in my particular situation. I am pulling a random object out of an array of objects and displaying them on button click. Each object has 3 props: word, language, trans. When the object is rendered I would really like it to display as follows

Word
langauge
translation

I have it centered when it renders but all in one line. Here is the code for my helper:

Ember.Handlebars.helper('randomize', function(myArray, options) {
  var random = myArray[Math.floor(Math.random() * myArray.length)];
  return random.word + random.language + random.trans;
});

So my dumb question is how to I include a line break when it renders?

Answer 1

I think a better tool for the job would be a component. Components automatically come with a template for doing exactly what you want to do, and then your display logic is separate from your business logic.

App.RandomWordComponent = Ember.Component.extend({
  word: null,
  language: null,
  translation: null,
  createRandomWord: function() {
    this.set('word', Math.random());
    this.set('language', Math.random());
    this.set('translation', Math.random());
  }.on('didInsertElement')
});

and the template:

<p style="font-weight: bold">
  Word: {{word}}
</p>
<p>
  language: {{language}}
</p>
<p>
  translation: {{translation}}
</p>

then use it in your other templates:

{{random-word}}

I simplified it a bit so you'll need to adjust it to your needs, but hopefully this points you in the right direction. complete example here