在Windows中使用模板的页面控制列表视图绑定8 [英] Binding listview on a page control using template in Windows 8

问题描述

由于某些原因，我的模板是没有得到在绑定数据的使用。我使用Visual Studio的导航应用项目类型Windows 8应用。当我运行它，每个项目只得到填补与全JSON字符串。类似不使用任何模板都具有约束力。

For some reason, my template is not getting used in the binding of data. I'm using Visual Studio's "Navigation App" project type for Windows 8 app. When I run it, each item just gets filled with the full json string. Similar to binding without using any templates at all.

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>

什么是越来越输出：

What's getting outputted:

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

为什么没有得到模板在绑定使用吗？谢谢你。

Why isn't the template getting used in the binding? Thanks.

推荐答案

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

The reason for the behavior you're seeing is subtle. I'll explain below, but the short answer is:

不要在一个页面控件看东西了由ID。使用类和选择，而不是语法

Don't look stuff up by id in a page control. Use classes and the select syntax instead.

下面将在你的页面的控制工作：

The following will work in your page control:

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

那么，这是怎么回事？

So, what's going on?

当你做 ItemTemplate：它videosWin8Tmpl 在你的选择的记录，在处理时间WinJS就会查找名为videosWin8Tmpl一个全局变量，这会传递给控制，模板对象。这正常工作，因为浏览器会自动与一个ID的每个元素创建全局变量。

When you do itemTemplate: videosWin8Tmpl in your options record, at processing time WinJS will look for a global variable named videosWin8Tmpl, and that'll be passed to the control as the template object. This normally works because the browser automatically creates global variables for each element with an ID.

然而，加载页控制时，在WinJS.UI.processAll被称为时间，该网页的DOM尚未添加到全局文件。这样，浏览器尚未创建的全局变量，因此它没有找到模板

However, when loading a page control, at the time WinJS.UI.processAll is called, the DOM for the page hasn't yet been added to the global document. As such, the browser hasn't yet created the global variable, and thus it doesn't find the template.

选择（...）前pression不依赖于全局变量，而不是从选项记录中指定的元件向上看，所以它可以正确地找到该模板。

the select(...) expression doesn't rely on global variables, instead looking upwards from the element the options record is specified on, so it can find the template correctly.

这篇关于在Windows中使用模板的页面控制列表视图绑定8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！