첫 번째 항목 - WinJS.Binding.Template

Question

나는했습니다과 같은 템플릿이 같은

<tbody id="departureTemplate" data-win-control="WinJS.Binding.Template"> 
<tr > 
    <td> 
     <span data-win-bind="innerText: timezone_scheduled_departure_time "></span> <span class="small" data-win-bind="innerText: flights_joined"></span> 
    </td> 

    <td> 
     <span data-win-bind="innerText: destination_joined"></span> <span class="small" data-win-bind="innerText: airline_names_joined"></span> 
    </td> 

    <td> 
     <span data-win-bind="innerText: remarkstr"></span> Värav <span class="small" data-win-bind="innerText: gate"></span> 
    </td> 
</tr> 
</tbody> 

그리고 코드 :

var departureData = JSON.parse(response.responseText); 
var departureBinding = new WinJS.Binding.List(departureData); 

var tableBody = document.getElementById("departureTemplate"); 
var template = document.getElementById("departureTemplate").winControl; 

var showItems = 4; 
var currentItems = 0; 

departureBinding.forEach(function (item) { 
    if (currentItems < showItems) { 
     template.render(item, tableBody); 
    } 

    currentItems++; 
}); 

하지만 내 문제는 렌더링 최초의 TR 더를 가지고 있다는 것입니다 없습니다 데이터. 다른 것들은 잘 처리됩니다. template.render로 보내기 전에 데이터를 로그 아웃하면 필요한 모든 값을 갖게됩니다.

이 문제의 원인은 무엇입니까?

Answer 1

이 시나리오에서는 이론상으로 훌륭합니다 (다소). 별도로 템플릿을 정의하면 템플릿 테이블이 실제로 있어야합니다. 템플릿 테이블과 렌더 된 엔티티가 분리되어 있어야합니다. 그렇지 않으면 첫 번째 행이 사라지는 것을 볼 가능성이있는 템플릿을 직접 렌더링하는 경우 템플릿이 실제로 파괴됩니다. 템플릿 데이터에 의해 채택됩니다.

 
<table> 
    <tbody id="airlineData"></tbody> 
</table> 

을하고 새 테이블을 가리 키도록 테이블 본문을 변경

단순히 테이블 아래에이를 추가 할 수 있습니다.

 
var tableBody = document.getElementById("airlineData"); 

저의 도움이되는지 알려주세요.

Answer 2

바인딩 템플릿 (WinJS.Binding.Template 컨트롤)은 ListView 및 FlipView 컨트롤과 함께 사용하도록 디자인되었습니다.

어떻게 작동하는지 보여주는 항목 How to use templates to bind data (Windows Store apps using JavaScript and HTML)을 검토하는 것이 좋습니다.

ListView 및 일부 CSS 스타일링을 사용하면 테이블 요소를 사용할 때의 코드와 코드를 줄이고 유연성을 높일 수 있습니다.

희망이 있습니다.

Windows Store 앱 개발에 대한 자세한 내용은 App Builder에 등록하십시오.