Блог

Главная - Вопросы по программированию - ko.JS привязка данных для извлечения входных данных из текстовой области — не захватывает / n

ko.JS привязка данных для извлечения входных данных из текстовой области — не захватывает / n

#html #knockout.js #data-binding #textarea #newline

#HTML #knockout.js #привязка данных #текстовая область #новая строка

Вопрос:

Ниже приведен мой код для текстовой области.

 <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"/>

Пожалуйста, предложите, если кто-нибудь сталкивался с такими проблемами.

Спасибо!

Ответ №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>

Ответ №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>