在 Windows 8 中使用模板在页面控件上绑定列表视图

Question

由于某种原因，我的模板没有用于数据绑定。我正在为 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'});            
    }
  });
})();

home.html：

<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>

输出了什么：

{"title":"title 1"}
{"title":"title 2"}

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

Answer 1

知道了 - 我将模板 sn-p 移到了<div id="contenthost">...</div> 上方的 default.html，然后绑定可以找到它。不知道为什么它必须在default.html 而不是home.html。

Answer 2

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

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

以下内容适用于您的页面控件：

<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(...) 表达式不依赖全局变量，而是从指定选项记录的元素向上查找，因此可以正确找到模板。