Question

我有分组ListView或短组的问题。我已经从webservice获取数据，但我不知道如何将数据绑定到代码后面的html模板用户。

HTML：

         <div class="listLayoutTopHeaderTemplate" data-win-control="WinJS.Binding.Template">
             <div class="listLayoutTopHeaderTemplateRoot">
                 <div data-win-bind="innerHTML: title"></div>
             </div>
         </div>
         <div id="listView"
              class="win-selectionstylefilled"
              data-win-control="WinJS.UI.ListView"
              data-win-options="{
        itemTemplate: select('.smallListIconTextTemplate'),
        groupHeaderTemplate: select('.listLayoutTopHeaderTemplate'),
        layout: { type: WinJS.UI.ListLayout, groupHeaderPosition: 'top'}}">
         </div>

Winjs：

var myData = new WinJS.Binding.List([
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" },
    ]);

    var grouped = myData.createGrouped(function (item) {
        return item.title.toUpperCase().charAt(0);
    }, function (item) {
        return {
            title: item.title.toUpperCase().charAt(0)
        };
    }, function (left, right) {
        return left.charCodeAt(0) - right.charCodeAt(0);
    });


    listView.winControl.groupDataSource = grouped.groupDataSource;

Answer 1

您需要从Web服务获取任何数据，这可能是JSON，并将该数据传输到WinJS.Binding.List，您可以将其用作ListView的数据源。在您显示的代码中，这是myData变量，您可以将其初始化为空（而不是使用仅来自示例的显示数据）。迭代您的Web服务数据，为每个项目调用List的add方法。如果要渲染的JSON已经有一个数组，那么解析出来并将数组传递给WinJS.Binding.List构造函数。

无论哪种方式，最终都会使用服务中的数据填充WinJS.Binding.List，然后您可以将其提供给ListView进行渲染。

如果您想避免获取Web服务数据并将其全部复制到内存中的WinJS.Binding.List中，那么有更好的方法可以处理数据源。为此，我将向您推荐我的免费电子书Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition的第7章，特别是第380页的“收集控制数据源”部分。

如何用翅膀来缩短数据形式的Web服务？

1 个答案: