需要传递到把手的字符串中的换行符

Question

我正在使用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}`);

}),

这里是将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>

Answer 1

嗯，您可以尝试white-space: pre-line; CSS到工具提示吗？使用这种方法，您无需指定\ n，只需按Enter。

即

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>

`