WinJS：嵌套列表视图答案

【问题标题】：WinJS: Nested ListViewsWinJS：嵌套列表视图
【发布时间】：2012-11-04 12:13:02
【问题描述】：

我在 Windows 8 Metro 应用程序中遇到了嵌套 ListViews 的问题。我得到错误：

Exception was thrown at line 5840, column 33 in 
ms-appx://microsoft.winjs.1.0/js/base.js 0x800a138f - JavaScript runtime error: 
Unable to get property 'dataSource' of undefined or null reference

代码是：

<div id="color" data-win-control="WinJS.Binding.Template">
    <div>color</div>
</div>
<div id="row" data-win-control="WinJS.Binding.Template">
    <div>
        <div>row</div>
        <div 
            data-win-control="WinJS.UI.ListView"
            data-win-options="{ itemDataSource : colorsDataSource.dataSource, 
                    itemTemplate: select('#color')}">  
        </div>
    </div>
</div>
<div id="basicListView" 
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : Data.rowsDataSource.dataSource, 
            itemTemplate: select('#row')}">  
</div>

有问题的行是：

data-win-options="{ itemDataSource : colorsDataSource.dataSource, 
                    itemTemplate: select('#color')}"

问题在于，在评估 data-win-options 时，colorsDataSource 不知何故无法访问 - 不知道为什么，因为数据结构 Data 是静态的，并且在 UI 被解析之前（在 args. setPromise(WinJS.UI.processAll());)。

例如，当我尝试将 row 模板修改为此：

<div id="row" data-win-control="WinJS.Binding.Template">
    <div>
        <div>row</div>
        <div data-win-bind="innerText: colorsDataSource.dataSource" ></div>
    </div>
</div>

正确输出[object Object]...

javascript结构Data如下所示：

var rows = new WinJS.Binding.List([]);
model.rows.forEach(function (row) {
    rows.push({
       colorsDataSource : new WinJS.Binding.List(row.rowData.colors)
    });                
});
Data.rowsDataSource = rows;

编辑： 嗯，找到原因了（base.js中属性data-win-options的处理）：

var options;
var optionsAttribute = element.getAttribute("data-win-options");
if (optionsAttribute) {
    options = WinJS.UI.optionsParser(optionsAttribute, global, {
        select: createSelect(element)
    });
}

选项在 global 上下文中进行评估，这意味着无法获取当前处理的项目（在我的情况下为 row 项目）...

解决方法是创建自定义渲染器（整个自定义控件）。此处部分描述了http://stephenwalther.com/archive/2012/05/23/metro-dynamically-switching-templates-with-a-winjs-listview.aspx - 请参阅 itemTemplateFunction

【问题讨论】：

标签： listview winjs

【解决方案1】：

嵌套列表视图基本上不起作用且不受支持。很遗憾，您不会找到简单的答案。

【讨论】：

【解决方案2】：

正如 Chris Tavares 所说，不支持嵌套的 ListView。

然而，这不起作用的更大原因是你需要一些如何在下一个控件上获取数据本身（让我们暂时忽略它是一个列表视图）。

您已尝试使用 data-win-options 属性解决此问题，正如您正确指出的那样，该属性仅解析为全局命名空间。

有一个解决方法——使用数据绑定。

你在哪里：

<div data-win-control="WinJS.UI.ListView"
     data-win-options="{ itemDataSource : colorsDataSource.dataSource, 
     itemTemplate: select('#color')}">  
</div>

从data-win-options 中删除itemsDataSource，并将其移至data-win-bind：

<div  data-win-control="WinJS.UI.ListView"
      data-win-options="{ itemTemplate: select('#color')}"
      data-win-bind="winControl.itemDataSource: colorsDataSource.dataSource">  
</div>

这假定 colorsDataSource 是正在呈现的项目的一个属性。例如你的行对象。

为了解决您的嵌套问题，您的“父”列表视图看起来可能会消失——只需根据您的数据源动态创建元素即可。

【讨论】：