Listview WinJS：嵌套列表视图

我对Windows 8 Metro应用程序中的嵌套列表视图有问题。我得到一个错误：

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选项时，colorsDataSource不知何故无法访问-不确定原因，因为数据结构数据是静态的，在用户界面在args.setPromiseWinJS.UI.processAll；之前被解析之前就已初始化

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

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

编辑： 嗯，我在base.js中找到了属性数据win选项处理的原因：

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

这些选项是在全局上下文中计算的，这意味着在我的情况下，无法获取当前已处理的项行项

---

解决方法是创建自定义渲染器和整个自定义控件。这里部分介绍了这一点-请参见itemTemplateFunction

嵌套的ListView基本上不起作用，也不受支持。不幸的是，您找不到一个简单的答案。

正如Chris Tavares所说，嵌套列表视图不受支持

然而，这不起作用的更大的原因是，您需要了解如何在下一个控件上获取数据本身，让我们忽略它现在是一个列表视图

您已经尝试使用datawinoptions属性来解决这个问题，正如您正确指出的那样，它只解析为全局名称空间

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

如果您有：

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

这假定colorsDataSource是正在渲染的项的属性。e、 g.您的行对象

为了解决嵌套问题，您的父listview可能会消失—只需基于数据源动态创建元素即可

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

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

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