javascript - 使用挖空文本创建新行

Question

我正在创建 SPA。我正在使用 knockout 和 observable 数组来迭代 json 数组。有时我在文本中有 br 标签，并使用 data-bind="text: myVar"我想换行。问题是，br 标签不起作用，因为我可以看到
除了新行。我的问题是:如何使用来自 json 数据的 br 标签强制 knockout 数据绑定(bind)创建新行？。我尝试使用“white-space: pre-wrap”，但没用。

Answer 1

您只需要使用 html: 进行绑定(bind)而不是 text:它将处理 <br /> .

运行以下代码段:

var viewModel = {
  myVal: ko.observable('First Line <br />Second Line <br />Third Line')
};

ko.applyBindings(viewModel);

* {
  font-family: Arial;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Text Binding:</h2>
<span data-bind="text: myVal"></span>
<h2>HTML Binding:</h2>
<span data-bind="html: myVal"></span>