WinJS:嵌套ListViews

Question

我对Windows8Metro应用程序中的嵌套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')}"

问题是，在评估数据--双赢选项时，colorsDataSource在某种程度上是不可访问的--不确定原因，因为数据结构数据在用户界面被解析之前是静态的和初始化的(在args.setPromise(WinJS.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>

它正确地输出对象对象..。

javascript结构数据如下所示：

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

data-win-options编辑： Hm，我找到了原因(在base.js中处理属性)：

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

这些选项是在全局上下文中计算的，这意味着无法获得当前处理的项(在我的例子中是行项).

解决方法是创建自定义呈现程序(整个自定义控件)。这里部分描述了http://stephenwalther.com/archive/2012/05/23/metro-dynamically-switching-templates-with-a-winjs-listview.aspx --参见itemTemplateFunction

Answer 1

嵌套的列表视图基本上不工作，也不受支持。不幸的是，你找不到一个简单的答案。

Answer 2

正如Chris所述，嵌套ListViews不受支持。

但是，这不能工作的更大原因是，您需要一些方法来获取下一个控件上的数据本身(让我们忽略它是一个列表视图)。

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

这方面有一项工作--使用数据绑定。

你拥有的地方：

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

从itemsDataSource中删除data-win-options，并将其移动到数据双赢绑定：

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

这假设colorsDataSource是正在呈现的项的属性。例如，你的行对象。

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