使用挖空文本创建新行

Question

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

Answer 1

您只需要使用 html: 而不是 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>

使用挖空文本创建新行

Creating new line using knockout text

javascript

json

knockout.js

javascript-databinding

single-page-application