1

我在单个 html 页面中有三个列表视图模板，如何将它们附加到语义缩放。

示例我有搜索

   <div id="zoom" style="width:90%; height:90%;" data-win-control="WinJS.UI.SemanticZoom" >
         <div id="zoomedinlist" data-win-control="WinJS.UI.ListView"></div>
         <div id="zoomedoutlist" data-win-control="WinJS.UI.ListView"></div>
      </div>        
    <!-- Templates -->
    <div id="headertemplate" data-win-control="WinJS.Binding.Template">
        <div data-win-bind="innerText:category"></div>
    </div>
    <div id="zoomedintemplate" data-win-control="WinJS.Binding.Template">
        <div>
            <img class="item-image" data-win-bind="src:imagesrc"   />
            <div data-win-bind="innerText:name"></div>
        </div>
    </div>
    <div id="zoomedouttemplate" data-win-control="WinJS.Binding.Template">
        <div class="sz-category" data-win-bind="innerText:category"></div>
    </div>

js文件

  var attractions = [
            { name: "jasmine", category: "flower", location: "east", imagesrc: "/images/Lemon.png" },
            { name: "jasmin", category: "flower", location: "east", imagesrc: "/images/Orange.png" },
            { name: "mine", category: "power", location: "north", imagesrc: "/images/Strawberry.png" },
            { name: "min", category: "jasime", location: "north", imagesrc: "/images/Banana.png" },
        ];

        var attractionsList = new WinJS.Binding.List(attractions);
        var attractionsListGrouped = attractionsList.createGrouped(

            function (i) { return i.category; },
            function (i) { return { category: i.category }; }

        );
        var zin = document.querySelector("#zoomedinlist").winControl;
        zin.itemDataSource = attractionsListGrouped.dataSource;
        zin.groupDatasource = attractionsListGrouped.groups.dataSource;
        zin.itemTemplate = document.querySelector("#zoomedintemplate");
        zin.groupHeaderTemplate = document.querySelector("headertemplate");

        var zout = document.querySelector("#zoomedoutlist").winControl;
        zout.itemDataSource = attractionsListGrouped.groups.dataSource;
        zout.itemTemplate = document.querySelector("#zoomedouttemplate");
    }

这是我得到的示例，但使用它我们可以静态加载数据，但我们无法将多个模板实现到单个列表视图。如何将多个列表视图绑定到从服务方法获取数据的语义缩放模板，请告诉我..

4

0 回答 0