GridLayout ListView - WinJS的极慢绘制

Question

这是我的第一个Windows 8应用..。在接受之前我还有最后一个问题。:)

我有一个布局设置为GridLayout的ListView。当加载主页面时，该应用程序向ListView的数据源添加了50项。ListView需要5-6秒才能呈现.

注：在项目被添加到dataSource后5-6秒.XHR/AJAX调用+加载需要200至300 200。

这看起来很奇怪。我在下面添加了一些代码：

JS -定义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 -向数据源添加项

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

HTML:

<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

您是在设置dataSource之前还是之后向ListView添加项？并不是说这就是它，而是想知道你是否因为以你的方式添加项目而受到了很大的搅扰。我会拉下项目并创建一个新的绑定列表，然后设置dataSource。

我以最小的延迟将100多个项目加载到listView中。

1. 用空列表设置ListView
2. 从网络中提取数据
3. 创建具有web调用结果的新绑定列表
4. 从新列表中用新数据源更新ListView

你的里程可能会不同..。