GridLayout ListView의 매우 느린 렌더링 - WinJS

Question

이것은 내 첫 번째 Windows 8 앱입니다.이 마지막 문제가 생기기 전에이 문제가 발생합니다. :)

레이아웃이있는 ListView가 GridLayout으로 설정되어 있습니다. 이 응용 프로그램은 메인 페이지가로드 될 때 ListView의 데이터 소스에 50 개의 항목을 추가합니다. ListView는 렌더링하는 데 5-6 초가 걸립니다.

NB : 항목이 dataSource에 추가 된 후 5-6 초. XHR/AJAX 콜 + 로딩은 200-300ms가 소요됩니다.

---

이것은 매우 이상하게 보입니다.

:

_ref = data.products; 
_results = []; 
for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
    product = _ref[_i]; 
    _results.push(Category.categoryProducts.push(product)); 
} 

HTML 데이터 소스에 항목 추가 - - ListView에와 데이터 소스

this.categoryProducts = new WinJS.Binding.List(); 
this.productListview = element.querySelector('#category-products-listview').winControl; 
this.productListview.itemTemplate = element.querySelector('#product-template'); 
this.productListview.itemDataSource = this.categoryProducts.dataSource; 
this.productListview.oniteminvoked = this._product_clicked.bind(this); 

JS 정의

JS : 나는 다음과 같은 몇 가지 코드를 추가 한

<div id="product-template" data-win-control="WinJS.Binding.Template"> <div class="item product"> <img class="item-image" src="/images/shopping-bag.png" data-win-bind="src: thumbnail; alt: name" onError="this.src='/images/shopping-bag.png';" /> <div class="item-details" > <div class="item-details-top"> <h4 class="item-title" data-win-bind="textContent: name"></h4> </div> <div class="item-details-bottom"> <div class="price"> <span style="font-weight:bold;">$</span> <span data-win-bind="textContent: price"></span></div> <div class="reviews" ><span class="icon-comments"></span> <span data-win-bind="textContent: reviews_count"></span></div> <div class="stars" > <span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span> <span data-win-bind="textContent: stars"></span></div> </div> </div> </div> </div> 

---

이것은 ListView가 렌더링 될 때의 모습입니다.

---

어떤 아이디어들?

Answer 1

ListView를 설정하기 전후에 dataSource에 항목을 추가합니까? 이 말은하지 않지만, 당신이 아이템을 추가함으로써 많은 혼란을 일으키는 지 궁금합니다. 항목을 풀다가 새 바인딩 목록을 만든 다음 dataSource를 설정합니다.

최소한의 지연으로 listView에 100 개의 항목을로드했습니다.

1. 는 웹에서 빈 목록으로
2. 풀 데이터를 목록보기 설정
3. 웹 호출 새로운 목록

마일리지의 새로운 데이터 소스와

업데이트의 ListView의 결과로 새로운 바인딩 목록 만들기 달라질 수 있습니다 ...