knockout 데이터 바인딩 중첩 된 html 요소

Question

h2 태그에는 모델 값에 대한 데이터 바인딩 텍스트 속성이 있고 내부에는 모델 값에 대한 데이터 바인딩 텍스트 속성 인 span 태그가 있습니다.

모델이 바인드 될 때 스팬이 대체되지만 html을 추가 할 수있는 방법이 있습니까? '텍스트'해당 요소의 바인딩을 설정합니다 innerText와 (또는는 TextContent가), 그래서 결합하여 수소 텍스트 (예 : 범위 등) 기존의 임베디드 HTML을 덮어 쓰기 때문에

http://jsfiddle.net/WKnWr/1/

Answer 1

일반적으로이 시나리오가 제대로 작동하기 위해 HTML을 변경하려는 것입니다. 그러나 이것이 가능하지 않으면 스팬을 삽입하는 사용자 정의 바인딩을 사용할 수 있습니다.

이 될 것 같은 :

ko.bindingHandlers.insertText = { 
    init: function(element, valueAccessor) { 
     var span = document.createElement("span"), 
      firstChild = element.firstChild; 

     element.insertBefore(span, firstChild); 
     ko.applyBindingsToNode(span, { text: valueAccessor() });  
    }  
}; 

샘플 : http://jsfiddle.net/rniemeyer/fLmXu/

Answer 2

현재 코드는 덮어 쓰게됩니다.

이 작업을 수행 할 수 있습니다 :

<h2> 
    <span data-bind="text:firstName"></span> 
    <span data-bind="text:lastName "></span> 
</h2>​ 

Answer 3

당신이 존 Earles 솔루션과 유사한 H2 텍스트에 대한 가상 요소를 사용할 수있는 최신 녹아웃으로

그러나 그것은 당신이 스타일 수 있음을 의미 성을 별도로 이름을