在Windows 8中使用模板在页面控件上绑定listview

由于某些原因，我的模板没有用于数据绑定。我正在为Windows 8应用程序使用Visual Studio的“导航应用程序”项目类型。当我运行它时，每个项目都会被完整的json字符串填充。与绑定类似，根本不使用任何模板

home.js：

var dataList = new WinJS.Binding.List();
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("VideosData", publicMembers);

(function () {
  "use strict";

  WinJS.UI.Pages.define("/pages/home/home.html", {
    ready: function (element, options) {
      dataList.push({title: 'title 1'});
      dataList.push({title: 'title 1'});            
    }
  });
})();

<section aria-label="Main content" role="main">
  <div id="videosWin8Tmpl" data-win-control="WinJS.Binding.Template" style="display:none">
    <div><span class="detail" data-win-bind="innerText: title"></span></div>
  </div>
  <div id="videosListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: VideosData.itemList.dataSource, itemTemplate: videosWin8Tmpl, layout: { type: WinJS.UI.GridLayout } }"></div>
</section>

home.html：

var dataList = new WinJS.Binding.List();
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("VideosData", publicMembers);

(function () {
  "use strict";

  WinJS.UI.Pages.define("/pages/home/home.html", {
    ready: function (element, options) {
      dataList.push({title: 'title 1'});
      dataList.push({title: 'title 1'});            
    }
  });
})();

<section aria-label="Main content" role="main">
  <div id="videosWin8Tmpl" data-win-control="WinJS.Binding.Template" style="display:none">
    <div><span class="detail" data-win-bind="innerText: title"></span></div>
  </div>
  <div id="videosListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: VideosData.itemList.dataSource, itemTemplate: videosWin8Tmpl, layout: { type: WinJS.UI.GridLayout } }"></div>
</section>

---

为什么在绑定中没有使用模板？谢谢。

明白了-我将模板片段移到了

..

上方的default.html，然后绑定可以找到它。不确定为什么它必须在

default.html

中，而不是在

home.html

中，您看到这种行为的原因很微妙。我将在下面解释，但简短的回答是：

不要在页面控件中按id查找内容。改用类和select语法

以下内容将在页面控件中起作用：

<section aria-label="Main content" role="main">
  <div class="videosWin8Tmpl" 
    data-win-control="WinJS.Binding.Template" style="display:none">
    <div><span class="detail" data-win-bind="innerText: title"></span></div>
  </div>
  <div id="videosListView" data-win-control="WinJS.UI.ListView" 
     data-win-options="{ itemDataSource: VideosData.itemList.dataSource,
                         itemTemplate: select('.videosWin8Tmpl'), 
                         layout: { type: WinJS.UI.GridLayout } }">
  </div>
</section>

那么，发生了什么事

在选项记录中执行

itemTemplate:videosWin8Tmpl

时，WinJS将在处理时查找名为videosWin8Tmpl的全局变量，该变量将作为模板对象传递给控件。这通常是有效的，因为浏览器会自动为每个具有ID的元素创建全局变量

但是，在加载页面控件时，在调用WinJS.UI.processAll时，页面的DOM尚未添加到全局文档中。因此，浏览器尚未创建全局变量，因此无法找到模板

---

select（…）表达式不依赖于全局变量，而是从指定选项记录的元素向上看，这样它就可以正确地找到模板。

复杂而微妙。我们也遇到了同样的问题，并求助于在JS文件中分配项模板以使其工作。你的回答很有道理，但我们永远也想不到。