Windows 8에서 템플릿을 사용하여 페이지 컨트롤에서 목록보기 바인딩

Question

어떤 이유로 든 내 템플릿이 데이터 바인딩에 사용되지 않습니다. Visual Studio의 "Navigation App"프로젝트 유형을 Windows 8 앱에 사용하고 있습니다. 내가 실행할 때 각 항목은 전체 json 문자열로 채워집니다. 템플릿을 사용하지 않고 바인딩과 비슷합니다.

home.js :

var dataList = new WinJS.Binding.List(); 
var publicMembers = { itemList: dataList }; 
WinJS.Namespace.define("VideosData", publicMembers); 

(function() { 
    "use strict"; 

    WinJS.UI.Pages.define("/pages/home/home.html", { 
    ready: function (element, options) { 
     dataList.push({title: 'title 1'}); 
     dataList.push({title: 'title 1'});    
    } 
    }); 
})(); 

home.html을 :

<section aria-label="Main content" role="main"> 
    <div id="videosWin8Tmpl" data-win-control="WinJS.Binding.Template" style="display:none"> 
    <div><span class="detail" data-win-bind="innerText: title"></span></div> 
    </div> 
    <div id="videosListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: VideosData.itemList.dataSource, itemTemplate: videosWin8Tmpl, layout: { type: WinJS.UI.GridLayout } }"></div> 
</section> 

출력 점점 일 : 템플릿에 익숙해되지 않는 이유

{"title":"title 1"} 
{"title":"title 2"} 

바인딩? 감사.

Answer 1

알아보기 - 템플릿 스 니펫을 default.html 바로 위의 <div id="contenthost">...</div> 위로 이동하면 바인딩에서 찾을 수 있습니다. 왜 default.html에 있어야하며 home.html이 아닌지 확실하지 않습니다.

Answer 2

당신이 보는 행동의 이유는 미묘합니다. 나는 아래에서 설명 하겠지만 짧은 대답은 :

페이지 컨트롤에서 id를 채우지 마십시오. 클래스와 select 구문을 대신 사용하십시오.

다음은 페이지 제어에서 작동 : 그래서, 무슨 일이야

<section aria-label="Main content" role="main"> 
    <div class="videosWin8Tmpl" 
    data-win-control="WinJS.Binding.Template" style="display:none"> 
    <div><span class="detail" data-win-bind="innerText: title"></span></div> 
    </div> 
    <div id="videosListView" data-win-control="WinJS.UI.ListView" 
    data-win-options="{ itemDataSource: VideosData.itemList.dataSource, 
         itemTemplate: select('.videosWin8Tmpl'), 
         layout: { type: WinJS.UI.GridLayout } }"> 
    </div> 
</section> 

?

옵션 레코드에 itemTemplate: videosWin8Tmpl을 입력하면 처리 시간에 WinJS가 videosWin8Tmpl이라는 전역 변수를 찾고 해당 변수가 템플릿 개체로 컨트롤에 전달됩니다. 이는 브라우저가 ID가있는 각 요소에 대한 전역 변수를 자동으로 만들기 때문에 정상적으로 작동합니다.

그러나 페이지 컨트롤을로드 할 때 WinJS.UI.processAll이 호출 될 때 페이지의 DOM이 아직 전역 문서에 추가되지 않았습니다. 따라서 브라우저는 아직 전역 변수를 만들지 않았으므로 템플릿을 찾지 못합니다.

select (...) 표현식은 전역 변수에 의존하지 않고 옵션 레코드가 지정된 요소에서 위쪽을보고 있으므로 템플릿을 올바르게 찾을 수 있습니다.