1

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

主页.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'});            
    }
  });
})();

主页.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"}

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

4

2 回答 2

3

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

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

于 2012-11-21T01:33:28.363 回答
0

Got it - I moved the template snippet over to default.html just above <div id="contenthost">...</div> and the binding could find it then. Not sure why it had to be in default.html and not in home.html.

于 2012-11-20T18:42:20.380 回答