Windows 8/Metro UI 데이터 바인딩 javascript

Question

기본적으로 html 파일에서 가져온 텍스트를 표시하는 windows 8 용 javascript/HTML을 사용하여 응용 프로그램을 만듭니다.

나는 data.js 파일을 사용하여 그룹 및 항목을 구성하고 있습니다. 속성 중 하나는 응용 프로그램의 주요 내용을 포함하는 HTML 페이지의 URL을 저장하는 'url'입니다.

WinJS.UI.Fragments.renderCopy(url) 
        .done(function (fragment) { 
        return fragment; 
}); 

어떻게 data.js의 배열의 각 항목에 대해이 코드를 실행합니까 :

내가 표시 할 내용을 포함하는 HTML 페이지에서 HTML 코드를 검색하기 위해이 코드를 함께했다 내용을 HTML 페이지에서 가져오고 제목/제목을 data.js 파일에서 가져올 수 있도록 데이터를 바인딩합니까?

혼란을 초래한다면 사과드립니다. 나는 어떤 도움을 주셔서 감사합니다.

감사합니다.

Answer 1

data.js의 레이아웃을 고수하고 자신 만의 데이터 클래스를 만들지 않는다고 가정하면 listview에 사용자 정의 렌더러를 사용합니다.

이런 식으로 뭔가 ...

var customRender = WinJS.Utilities.markSupportedForProcessing(function (itemPromise) { 
    var currentItem = {}; 

    return itemPromise.then(function (item) { 
     currentItem = item; 
     var myDiv = document.createElement("div"); 
     return WinJS.UI.Fragments.renderCopy("/html/1_BasicFragmentLoad_Fragment.html", myDiv) 
    }) 
    .then(function (fragment) { 
     var itemTemplate = WinJS.Utilities.query('.itemtemplate')[0]; 
     currentItem.data.title = fragment.innerHTML; 

     return itemTemplate.winControl.render(currentItem.data); 

    }); 
} 

);

이 예제에서는 data.js의 주어진 항목 제목에 html 조각의 내용을 바인딩하고 있습니다. itemtemplate을 업데이트하고 title 요소를 textContent 대신 innerHTML에 바인딩해야합니다.

<h4 class="item-title" data-win-bind="innerHTML: title"></h4> 

또한 사용자 지정 렌더러를 목록보기에 할당해야합니다. 당신이 당신의 자신의 데이터 클래스를 만들 수 있다면 당신은 당신은에서 약속 체인을 넣을 수

listView.itemTemplate = customRender; 

... HTML 마크 업에서이 작업을 수행하거나 이에 groupItems.js에서 템플릿 JS를 변경할 수 있습니다 고객 렌더러를 클래스 생성자에 추가하여 고객 렌더러가 필요 없습니다.