텍스트 블록 내의 특정 태그에 녹아웃 바인딩을 프로그래밍 방식으로 적용하십시오.

Question

Knockout JS을 사용하여 div에 databind하려는 html 마크 업 블록이 있습니다. 이것은 녹아웃 html 바인딩으로 충분히 간단합니다.

내가하고 싶은 것은 해당 클래스를 기반으로 해당 HTML 마크 업 내에 조건부로 자식 요소를 바인딩하는 것입니다. 이러한 요소는 인라인 요소 (예 : span, a 태그 등)이므로 html 마크 업 내의 아무 곳에 나 나타날 수 있습니다.

클릭 이벤트를이 텍스트 블록 내의 특정 단어 나 구문으로 데이터 바인딩하여 함수 (이 경우에는 대상 단어 나 구문의 정의가있는 모달)를 호출 할 수 있습니다.

누구든지이 작업을 수행하는 방법을 알고 있습니까?

1. 사용 JQuery와 사후 어떻게 든 데이터 바인딩 다음에별로 요소를 잡은하기 : 내가 무엇을 볼 수에서, 나는 탐구하는 두 가지 주요 도로가있다. 에 데이터 바인딩 할 수없는, DOM을 준비 등 그 방법

2. 사용 녹아웃의 template binding을 가지고 있지 및 구문을 분석 afterRender 템플릿 콜백을 추가 -이 다양한 이유로 작동하는지 모르겠어요 요소 및 데이터 바인드에 대한 텍스트 블록은 그에 따라 입니다.

3. 위의 두 가지 조합. (그래, 나도 알다시피, 그것은 세 가지 방법이다.)

누구든지 전에 이렇게 한 적이 있습니까? 가능하다면 조언과 피드백을 받고 싶습니다. 고맙습니다!

Answer 1

바인딩하는 html이 안전하다는 확신이없는 한이 방법을 사용하지 않는 것이 좋습니다. html 바인딩은 다음과 같습니다. 이 보면

이

ko.bindingHandlers['html'] = { 
    'init': function() { 
     // Prevent binding on the dynamically-injected HTML 
     // (as developers are unlikely to expect that, and it 
     // has security implications) 
     return { 'controlsDescendantBindings': true }; 
    }, 
    'update': function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.utils.setHtml(element, value); 
    } 
}; 

당신이 http://jsfiddle.net/madcapnmckay/LDtuF/1/

ko.bindingHandlers['html2'] = { 
    'init': function() { 
     return { 'controlsDescendantBindings': false }; 
    }, 
    'update': function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     ko.utils.setHtml(element, value); 
    } 
}; 

이 조심 바인딩 HTML2를 작성할 수, 당신은 HTML이 안전하지 않은 목적으로 사용할 수 없습니다 있는지 확인하려면.

희망이 도움이됩니다.