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

添加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>

Answer 2

這是一個有點髒，但是...您可以替換 '\ 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>