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

在您的div中添加css规则white-space: pre-wrap ：

 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>