CODEWITHSUNDEEP
ember.jshandlebars.js
Kris
Kris

Reputation: 337

Need line break in string that is getting passes to handlebars

I am using ember.js and handlebars. I need to pass a string to a component and that string needs to have line breaks. I am struggling trying to get the line breaks to work. I have tried using \n, \ , + `
' + none of these seem to work

Here is my computed property where the string is getting returned: 

scoreMessage: Ember.computed(function scoreMessage () {
  const model = this.get('model')
  return Ember.String.htmlSafe(`Advocacy Post: ${model.total_advocacy_posts_count}\n 
   Assets Submitted: ${model.total_assets_submitted_count}\n Engagement from asset: 
   ${model.total_engagement_from_assets_count}`);

}),

Here is the handlebars file where the scoreMessage is passed into the ui-tooltip-on-mouseover component

<li class="item-cell flex-end score">
  {{#ui-tooltip-on-mouseover
    message=scoreMessage
    tooltipLocation="top"
    class="action"
   }}
    Score
  {{/ui-tooltip-on-mouseover}}

</li>

Upvotes: 0

Views: 627

Answers (1)

Alberto Cantu
Alberto Cantu

Reputation: 71

Hmm, can you try white-space: pre-line; CSS to the tooltip? with this approach, you don't need to specify \n, you just press enter.

i.e.

scoreMessage: Ember.computed(function scoreMessage () {
  const model = this.get('model')
  return Ember.String.htmlSafe(
`Advocacy Post: ${model.total_advocacy_posts_count}
 Assets Submitted: ${model.total_assets_submitted_count}
 Engagement from asset: ${model.total_engagement_from_assets_count}`
);

}),



var model = { total_advocacy_posts_count: 3, total_assets_submitted_count: 4, total_engagement_from_assets_count: 7 }

var text = `Advocacy Post: ${model.total_advocacy_posts_count}
 Assets Submitted: ${model.total_assets_submitted_count}
 Engagement from asset: ${model.total_engagement_from_assets_count}`
 
 window.onload = function() {
   document.querySelector('.tooltip.other').innerHTML = text;
 }
.tooltip {
  white-space: pre-line;
  padding: 20px;
}
body {
 background: white;
}
<div class="tooltip">
  Some
  Text that does take
  line breaks without specifying them
</div>

<div class="tooltip other"></div>

`

Upvotes: 1

Related Questions