knockout.js의 nl2br에 대한 사용자 정의 바인딩 만들기

Question

"/n"을 "<p>"요소 내에서 "<br />"으로 바꿀 사용자 정의 바인딩을 작성하려고합니다.

나는 개념을 어느 정도 이해하지만, 나는 그것을 얻으려고 열심히 노력하고있다. 누구든지 제가 잘못 가고있는 곳을 제안 할 수 있습니까? "<br />"대신 "/n"을 사용하여 실제 값을 유지하기 위해 계산 된 관찰 가능을 사용하고 싶지 않습니다.

ko.bindingHandlers.nl2br = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var field = valueAccessor(); 
     field.replace(/\n/g, '<br />'); 
     $(element).val(field) 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var field = valueAccessor(); 
     field.replace(/\n/g, '<br />'); 
     $(element).val(field) 
    } 
}; 

Answer 1

TL; DR 처음

ko.bindingHandlers.nl2br = { 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var field = ko.utils.unwrapObservable(valueAccessor()); 
     field = field.replace(/\n/g, '<br />'); 
     ko.bindingHandlers.html.update(element, function() { return field; }); 
    } 
}; 

---

전체 응답

먼저 일을 답변은 replace 호출은 아마해야합니다 :

field = field.replace(/\n/g, '<br />'); 

그렇지 않으면 새 문자열 가져 포기 에드.

그 외에도 직접 요소 값을 설정하지 않는 것이 좋습니다. 무거운 짐을 싣기 위해 기존 핸들러 (아마도 다양한 브라우저에서 잘 테스트 된)에 의존하십시오. 주제 (특히 항목 3)의 R.P. Niemeyer's blog post을 참조하십시오.

당신은 사용할 수 있습니다 중 하나 그대로 "<br />"을 렌더링하거나 것 the text binding (당신이 입력을 신뢰하는 경우!) the html binding는 <br />에 대한 줄 바꿈을 렌더링합니다. 이런 후자의 외모 : 단지 *** 시각적를 *** \ n을 문자 텍스트에 새로운 라인을 얻을 필요가있는 사람들을위한

ko.bindingHandlers.nl2br = { 
 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
 
     var field = ko.utils.unwrapObservable(valueAccessor()); 
 
     field = field.replace(/\n/g, '<br />'); 
 
     ko.bindingHandlers.html.update(element, function() { return field; }); 
 
    } 
 
}; 
 

 
ko.applyBindings({ description: ko.observable("This is\nSparta!") });

p, pre { background-color: #dde; margin: 4px 0; }

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

 
<strong>Text version in &lt;p&gt;:</strong> 
 
<p data-bind="text: description"></p> 
 
<hr /> 
 
<strong>Text version &lt;pre&gt;:</strong> 
 
<pre data-bind="text: description"></pre> 
 
<hr /> 
 
<strong>NL2BR version in &lt;p&gt;:</strong> 
 
<p data-bind="nl2br: description"></p>