jQuery 템플릿 내 KnockoutJS 템플릿 사용

Question

jQuery 템플릿이 있는데 여기에 KnockOutJS 템플릿을 사용하고 싶습니다.

다음 예제와 같이이 작업을 수행 할 수 없습니다 : http://jsfiddle.net/maate/bwmcR/1/.

그러나 KnockOutJS 템플릿 자체가이 예제에서와 같이 jQuery 템플릿의 범위 밖에있을 때 작동합니다 : http://jsfiddle.net/maate/bwmcR/2/.

이 문제는 템플릿 데이터 변수의 범위와 관련이있는 것 같습니다 (예 : subTemplate 내의 ${test} 변수에 액세스 할 수 있음).

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

br. 모르 튼

Answer 1

첫 번째 예는 유효하지 않습니다. 하위 템플릿을 만들려는 경우에도 별도의 스크립트 태그에 있어야합니다. 서로간에 템플릿을 포함 할 수 없기 때문에 하나씩 템플릿을 만들어야합니다. 잘못된 :

<script id="superTemplate" type="text/html"> 
... 
<script id="subTemplate" type="text/html"> 
... 
</script> 
</script> 

RIGHT : 당신이 UL에 subtemplate을 적용 할 때, 당신이 읽을 수 없습니다 그래서, foreach 문에 사용되어야 할 데이터 정의

<script id="superTemplate" type="text/html"> 
... 
</script> 
<script id="subTemplate" type="text/html"> 
... 
</script> 

test은 항목의 속성이 아니기 때문에 원하는 경우 templateOption으로 전달하여 하위 템플릿에서도 사용할 수 있습니다.

<ul data-bind="template: { name: 'subTemplate', foreach: items, templateOptions: { testValue: 'Value' } }"></ul> 

이렇게하면 하위 템플릿에서 사용할 수 있습니다.

<span data-bind="text: $item.testValue"></span> 

또한 기본 jQuery 템플릿 태그는 사용하지 않으며 데이터 바인딩이 훨씬 편리합니다.

<div id="body" data-bind="template:{name: 'superTemplate'}"></div> 

결국에는 더 많거나 적을 것입니다. 당신은 여기를 볼 수 있습니다 : http://jsfiddle.net/bwmcR/18/