테이블의 WinJS 렌더링 listView

나는 HTML/JS Win8 store app에서 작업 중이다. ListView를 테이블에 렌더링하고 싶습니다. 나는 이것을 어떻게 얻을 수 있을까? http://postimg.org/image/4z39tvu9v/테이블의 WinJS 렌더링 listView

내가 이것과 같은 효과를 얻을 싶습니다 (내가 사용 :

 <table id="products"> 
      <tbody> 
       <tr> 
        <th>Name</th> 
        <th>Description</th> 
       </tr> 
       <tr data-win-control="WinJS.Binding.Template" id="productsRowTemplate"> 
        <td data-win-bind="textContent: name"></td> 
        <td data-win-bind="textContent: description"></td> 
       </tr> 
      </tbody> 
     </table> 

     <div id="productsListView" 
      data-win-control="WinJS.UI.ListView" 
      data-win-bind="winControl.itemDataSource: products.dataSource;" 
      data-win-options="{ 
      itemTemplate: select('#productsRowTemplate'), 
      layout: { type: WinJS.UI.ListLayout } 
      }"> 
     </div>

그러나, 결과는 내가 전혀 기대되지 않습니다 : 지금은

나는 그런 일이 내보기에서 그 예제에서 스타일링) : http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy

내가 listView를 사용하는 이유는 속성을 통해 컬렉션을 노출하는 ViewModels로 작업하고 있다는 것입니다. o 데이터를 뷰에 바인딩하고 특정 템플릿을 사용하여 표시합니다. 뷰의 코드에서 테이블을 동적으로 생성하고 싶지는 않습니다.

출처

2013-07-30 Jarek Mazur

테이블을 렌더링하는 것이 목표라면 ListView는 원하는 것이 아닙니다. 중요한 것은 콜렉션 아이디어 (데이터 소스)를 사용자가 사용하는 컨트롤에서 분리하는 것입니다. 그래서 WinJS.Binding.List 컬렉션 클래스와 WinJS.UI.ListView 컨트롤이 별도의 엔터티로 존재합니다.

표는 모음을 표시하는 한 가지 방법입니다. ListView는 또 다른 것입니다. 따라서 두 가지를 결합하는 것은 실제로 의미가 없습니다. 마크 업에서 템플릿 요소는 DOM에서 실제로 제거되어 테이블에 렌더링되지 않습니다. ListView 자체를 렌더링하는 데 해당 템플릿을 사용하려고 시도합니다 있지만 <tr> 및 <td> 요소 (< 테이블 > 외부) 내에서 요소를 생성합니다 실제로 작동하지 않습니다. 즉, 템플릿은 템플릿을 선언 한 위치가 아니라 ListView를 선언 한 div의 자식으로 데이터 소스의 각 항목에 렌더링됩니다.

ListView를 테이블의 자식으로 선언 할 수도 있지만 ListView가 선언 한 요소 아래에 깊은 div 구조를 만들기 때문에 테이블의 자식으로도 ListView를 선언 할 수 있습니다.

이렇게하려면 ListView를 계산하십시오. 대신 WinJS.Binding.List를 가져 와서 해당 컨트롤의 직접 자식으로 렌더링 할 수있는 간단한 사용자 지정 컨트롤이 필요합니다. Windows 8.1 미리보기에는이 정확한 용도로 사용되는 Repeater라는 새로운 컨트롤이 있으며 HTML Repeater control sample은 < 테이블 >의 컨텍스트에서이를 보여줍니다. 표제에 < theadad를 사용하고 표제에 <tbody>의 컨트롤을 선언하여 <tr>이 루트 요소 인 서식 파일의 복사본을 렌더링 할 수 있습니다.

Windows 8을 타겟팅하는 경우 물론 리피터가 없지만 자신 만의 리피터를 만들려면 너무 복잡하지 않습니다 (원하는 경우 Win8.1 Repeater 소스에서 빌려 오기). WinJS.Class.define을 사용하여 생성자를 정의하고 데이터 소스와 템플릿을 선언적으로 지정할 수있는 옵션이 있는지 확인하십시오. 템플릿에는 데이터 - 윈 - 바인드 속성이 포함됩니다. 컨트롤의 생성자에서 Binding.List를 반복하여 목록의 각 항목에 대한 템플릿 복사본을 렌더링합니다. 그런 다음 해당 항목의 루트 요소와 원하는 데이터 바인딩을 설정할 데이터 소스의 항목을 사용하여 WinJS.Binding.processAll을 호출합니다.

이 컨트롤을 tbody 요소에 다시 선언하여 올바른 위치에 tr 자식을 만들 수 있습니다.동적 테이블을 만드는,하지만 당신은 선언적으로 관계를 데이터 바인딩을 설정할 수 있도록이 컨트롤에 캡슐화있어 결국

<table class="table"> 
    <thead class="table-header"><tr><td>Id</td><td>Description</td></tr></thead> 
    <tbody class="table-body" 
     data-win-control="WinJS.UI.Repeater" data-win-options="{data: Data.items}"> 
     <tr class="table-body-row"> 
      <td data-win-bind="textContent: id"></td> 
      <td data-win-bind="textContent: description"></td> 
     </tr> 
    </tbody> 
</table>

: (가 인라인 템플릿을 사용) 리피터 예제를 사용합니다.

출처

2013-07-30 16:33:31

철저한 답변을 보내 주셔서 감사합니다. 내가 ListView를 사용하려고 한 이유는 내가 Repeater 컨트롤 (테이블 행으로 템플릿 된 항목 목록)에서 언급 한 것과 비슷한 것을 얻으려고했기 때문입니다. 귀하의 답변 덕택에 왜 내 접근 방식이 무효한지 이해합니다. –

테이블의 WinJS 렌더링 listView

답변

관련 문제