Нужен разрыв строки в строке, которая получает проходы к рулю - PullRequest
Новая
       19

Нужен разрыв строки в строке, которая получает проходы к рулю

0 голосов
/ 11 апреля 2020

Я использую ember. js и руль. Мне нужно передать строку компоненту, и эта строка должна иметь разрывы строк. Я изо всех сил пытаюсь заставить разрывы строки работать. Я попытался использовать \ n, \, + `
'+ ни один из них, кажется, не работает

Вот мое вычисленное свойство, в котором возвращается строка: 

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

}),

Здесь файл handlebars, в котором ScoreMessage передается в компонент ui-tooltip-on-mouseover 

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

</li>

1 Ответ

1 голос
/ 11 апреля 2020

Хм, вы можете попробовать white-space: pre-line; CSS к всплывающей подсказке? при таком подходе вам не нужно указывать \ n, вы просто нажимаете ввод.

т.е. 

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>

`

...