Windows 8의 listview (WinJS)의 동적 템플릿

Question

목록 레이아웃의 간단한 listview가있는 windows 8 응용 프로그램이 있습니다. 내 블로그 항목 (신디케이션)을 가져 왔으므로 지금 달성하고 싶은 것은 "더 많은로드"버튼으로 작동하는 동적 항목을 추가하는 것입니다. 이렇게하려면이 항목에 대해 다른 템플릿 만 지정하고 싶습니다. 내가 찾은 샘플은 자바 스크립트를 사용하여 모든 템플릿 요소를로드해야하기 때문에 실제로 다용도가 아닌 함수 템플릿을 사용합니다. 동적으로 항목 속성을 기반으로 WinJS.Binding.Template을 지정하는 방법이 있습니까?

Answer 1

http://stephenwalther.com/blog/archive/2012/05/23/metro-dynamically-switching-templates-with-a-winjs-listview.aspx

Answer 2

이 튜토리얼의 마지막 부분 인 "Using a function to display items"이 도움이 될 것으로 생각합니다. 함수 내에서 목록에있는 항목을 판별하고 다른 템플리트를 렌더링 할 수 있습니다. 또한 HTML 파일에서 다른 템플리트를로드 할 수도 있습니다.

automaticallyLoadPages 속성과 함께 pagesToLoad 속성을 사용하면됩니다. 사용자가 목록 상자의 끝까지 스크롤하면 새 항목로드가 자동으로 시작됩니다.

Answer 3

전 실제로 같은 문제가있었습니다. 이 문제를 해결하는 방법은 다음과 같습니다.

function listItemTemplateRenderer(item) { 

    //Get data from item. 
    var data = item._value.data; 

    // if it is a special item renderer, apply special template 
    if (data.isSpecialItem) { 
     return specialItemRenderer(data); 
    } 

    var itemElement = document.createElement('div'); 
    itemElement.className = "listItemTemplate"; 

    var placeHolder = document.createElement('div'); 
    placeHolder.className = "itemTemplateClass"; 
    placeHolder.id = data.id; 

    var itemDetail = document.createElement('div'); 
    itemDetail.className = "itemDetailStyle"; 

    ... //whatever you wanna add to your template 

    //Append child elements 
    placeHolder.appendChild(itemDetail); 
    itemElement.appendChild(placeHolder); 

    return { 
     element: itemElement 
    }; 
} 

// Template for the special item 
function messageItemRenderer(item) { 

    var itemElement = document.createElement('div'); 
    itemElement.className = "listItemTemplat"; 

    var placeHolder = document.createElement('div'); 
    placeHolder.className = "specialItemTemplate"; 
    placeHolder.id = item.id; 

    var dataText = document.createElement('div'); 
    dataText.className = "dataText"; 
    dataText.innerText = item.text; 
    placeHolder.appendChild(dataText); 

    itemElement.appendChild(placeHolder); 

    itemElement.onclick = item.clickHandler; 

    return { 
     element: itemElement 
    }; 
} 

희망이 있습니다.