WinJS:嵌套ListViews

时间:2012-11-04 12:13:02

标签: listview winjs

我在Windows 8 Metro应用程序中遇到嵌套ListView的问题。我收到错误:

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());。)

例如,当我尝试将模板修改为:

<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结构数据如下所示:

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)
    });
}

选项在全局上下文中进行评估,这意味着无法获取当前处理的项目(在我的情况下是项目)...

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

2 个答案:

答案 0 :(得分:0)

嵌套列表视图基本上不起作用且不受支持。不幸的是,你找不到简单的答案。

答案 1 :(得分:0)

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

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

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

正在解决这个问题 - 使用数据绑定。

你在哪里:

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

itemsDataSource移除data-win-options,然后将其移至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是正在渲染的项目之外的属性。例如你的行对象。

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