knockout.js : 뷰 모델을 분리하기 위해 내부 html을 바인딩하십시오.

Question

프로젝트에서 Knockout을 사용하여 동적으로 메뉴를 생성하고 싶습니다. 따라서 HTML 바인딩을 사용하여 콘텐츠를 동적으로로드하는 viewmodel에 섹션 요소를 바인딩합니다.

<div class="flex" data-bind="foreach: { data: menuItems, afterRender: renderedHandler }"> 
    <div class="leBorderContainer" data-bind="attr: {onclick: $data.clickEvent}"> 
     <img data-bind="attr: {src: $data.imageUrl}" /> 
     <h2 data-bind="text: $data.header"></h2> 
     <section data-bind="html: $data.content"></section> 
    </div> 
</div> 

일반 HTML 소스 코드에는 정상적으로 작동합니다. 그러나 또 다른 요구 사항은 내부 HTML 노드가 때로는 자체 뷰 모델에 바인딩되어야한다는 것입니다.

첫 번째 아이디어는 afterRender 이벤트를 사용하고 거기에 새로운 바인딩을 적용하는 것이 었습니다. 이 방법은 처음에는 해당 노드에 이미 적용된 뷰 모델이 있었기 때문에 실패했습니다.

let vm = { 
    menuItems: [] as Array<{ clickEvent:() => void, imageUrl: string, header: string, content: string, getViewModel?:() => object }>, 
    renderedHandler: function (elements: Array<HTMLElement>, data: { clickEvent:() => void, imageUrl: string, header: string, content: string, getViewModel?:() => object }) { 
     console.log(elements); 
     console.log(data); 
     if (data.getViewModel) { 
      //console.log($(elements).find('section')); 
      ko.applyBindings(data.getViewModel(), elements[1]); 
     } 
    } 
}; 

은 몇 가지 조사 후 나는 다른 뷰 모델에 바인딩하기 전에 해당 노드 바인딩을 해제 할 필요가 있다는 발견했다. 다시 말해, 섹션 요소를 완전히 지웠 기 때문에 다시 작동하지 않습니다.

그런 다음 html 바인딩과 함께 with 바인딩을 사용하려고했습니다. 이 접근법은 html을 사용하는 것이 허용되지 않았고 동일한 요소에 바인딩을 사용하기 때문에 다시는 성공적이지 못했습니다.

<section data-bind="html: $data.content, with: $data.getViewModel ? $data.getViewModel() : null"></section> 

나는 내 메뉴 작업을 어떻게 할 수 있는지 전혀 모른다. 누군가가 나를 도울 수 있기를 바랍니다.

<section data-bind="template: { nodes: $($data.content), data: $data.getViewModel ? $data.getViewModel() : null }"></section> 

:

Answer 1

나는 노드 매개 변수 바인딩 템플릿을 사용하여 해결책을 발견