多个列表视图的语义缩放实现

Question

我在单个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 file

  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");
    }

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