2013-07-25 6 views
2

두 개의 템플릿이있는 데이터 테이블이 있습니다. 보기는이고 기본값은 입니다. 편집입니다. KO의 템플릿에서 Durandal의 구성으로 전환하는 방법을 알아내는 데 어려움을 겪고 있습니다. 여기에 내 현재 설정입니다 :DurandalJS - KO 템플릿에서 전환하기

보기

<table> 
    <tbody data-bind="foreach: { data: items }"> 
    <tr> 
     <td data-bind="template: {name: $root.itemTemplates}"></td> 
     <td class="options"> 
     <ul> 
      <li><a data-bind="click: edit">Edit...</a></li> 
     </ul> 
     </td> 
    </tr> 
    </tbody> 
</table> 

<script id="viewTemplate" type="text/html"> 
    <a href="" data-bind="text: name"></a> 
</script> 

<script id="editTemplate" type="text/html"> 
    <form class="edit" data-bind="submit: $root.save"> 
    <input type="text" name="name" data-bind="value: name, event: { keyup: $root.cancelEdit }" /> 
    </form> 
</script> 

itemTemplates 기능이 제대로 작동이 중지 것으로 나타났습니다하지만

self.selectedItem = ko.observable(); self.edit = function(item) { self.selectedItem(item); } self.itemTemplates = function(item) { return self.selectedItem() === item ? 'editTemplate' : 'viewTemplate'; } 

지금은 <td data-bind="compose: itemTemplates()"></td>를 사용하여 구성을 전환 시도 뷰 모델

, item 매개 변수에 대해 정의되지 않은 값을 반환합니다. 또한 나는 edit을 눌렀을 때 목록에있는 각 항목을 리 바인드하여 모든 항목이 선택한 항목 대신에 템플리트를 전환하도록했습니다.

아이디어가 있으십니까?

답변

4

먼저보기가 자신의 파일에있는 views 디렉토리에 있고 각각 itemTemplates 함수가 반환하는 이름과 일치하는지 확인하십시오. 이름을 더 서술적인 것으로 변경하고 싶을 수도 있지만, 그것은 당신에게 달려 있습니다. 그런 다음 바인딩이 이렇게 보입니다. 그것은 viewLocator 기본 규칙으로 일치 이름와도이다 모델에 대한 일치하는보기를 찾습니다없이

<table> 
    <tbody data-bind="foreach: items }"> 
    <tr> 
     <td data-bind="compose: { view: $parent.itemTemplates(), model: $data }"></td> 
     ... 
    </tr> 
    </tbody> 
</table> 

view 속성을 사용하는 볼을 제어 할 필요가있다.

+0

예, 외부 템플릿을 만들고로드하는 것을 잊었습니다. 내 문제는'itemTemplates'로, 템플릿의 로딩을 처리하는 함수입니다. 선택한 항목에만 변경 사항을 적용하는 대신 모든 항목을 변경합니다. – Norbert

+0

신경 쓰지 마라. 알아 냈어. 템플릿 선택기 함수 내에서 현재 항목을 가져 오기 위해'itemTemplates ($ data) '를 사용해야했습니다. 감사! – Norbert