ko.JS 数据绑定以从文本区域获取输入 - 不捕获 /n

Question

下面是我的文本区域代码。

<div>

<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>

</div>

我想在另一个DIV中显示在此文本区域中输入的内容。

下面是显示文本区域内容的代码。

<div data-bind="text: environment"/>

这个div如下图所示。

问题： 当我在另一个 div 中显示内容时，没有捕获新行。

我都试了什么？ 我尝试了以下方法来查看新行 /n 是否会从文本区域按原样显示。但是，运气不好！

<div data-bind="html: environment"/>
<div data-bind="value: environment"/>

如果有人遇到过此类问题，请提出建议。

谢谢！

Answer 1

有点脏，但是...可以把'\n'换成''显示div:

var viewModel = {
  environment: ko.observable("initial text")
}

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>Change text and click outside textarea in order to update value.</div>

<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>

<div>Entered text:</div>
<div data-bind="html: environment().replace('\n', '</br>')"></div>

Answer 2

将 css 规则 white-space: pre-wrap 添加到您的 div:

var viewModel = {
  environment: ko.observable("initial text")
}

ko.applyBindings(viewModel);

div {
  white-space: pre-wrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>Change text and click outside textarea in order to update value.</div>

<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>

<div>Entered text:</div>
<div data-bind="html: environment()"></div>

ko.JS 数据绑定以从文本区域获取输入 - 不捕获 /n

ko.JS databinding to fetch input from Text Area - Not capturing /n

html

data-binding

textarea

newline

knockout.js

ko.JS 数据绑定以从文本​​区域获取输入 - 不捕获 /n

ko.JS databinding to fetch input from Text Area - Not capturing /n

html

data-binding

textarea

newline

knockout.js

ko.JS 数据绑定以从文本区域获取输入 - 不捕获 /n