WinJS：嵌套列表视图 [英] WinJS: Nested ListViews
问题描述
我有在Windows 8 Metro应用嵌套列表视图的问题。我得到错误：
例外是在5840线抛出，列33
MS-APPX：//microsoft.winjs.1.0/js/base.js 0x800a138f - JavaScript的运行时错误：
无法获取的未定义或为空引用属性数据源
在code是：
＆LT; DIV ID =色数据双赢的控制=WinJS.Binding.Template＆GT;
＆LT; DIV＆GT;彩色＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =行数据双赢的控制=WinJS.Binding.Template＆GT;
＆LT; DIV＆GT;
＆LT; DIV＆GT;排＆LT; / DIV＆GT;
＆LT; DIV
数据双赢的控制=WinJS.UI.ListView
数据共赢选项={itemDataSource：colorsDataSource.dataSource，
ItemTemplate：它选择（'＃色'）}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =basicListView
数据双赢的控制=WinJS.UI.ListView
数据共赢选项={itemDataSource：Data.rowsDataSource.dataSource，
ItemTemplate：它选择（'＃行'）}＆GT;
＆LT; / DIV＆GT;
问题的行是：
数据共赢选项={itemDataSource：colorsDataSource.dataSource，
ItemTemplate：它选择（'＃色'）}
问题是，在当被评估的colorsDataSource数据共赢选项的那一刻是某种不可访问 - 不知道为什么，因为数据结构的数据是静态的初始化之前的UI甚至解析（参数之前。 setPromise（WinJS.UI.processAll（））;）
例如，当我尝试修改行模板，这样的：
＆LT; DIV ID =行数据双赢的控制=WinJS.Binding.Template＆GT;
＆LT; DIV＆GT;
＆LT; DIV＆GT;排＆LT; / DIV＆GT;
＆LT; DIV数据共赢绑定=的innerText：colorsDataSource.dataSource＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
它输出正确的翻译：...
JavaScript的结构数据是这样的：
VAR行=新WinJS.Binding.List（[]）;
model.rows.forEach（函数（行）{
rows.push（{
colorsDataSource：新WinJS.Binding.List（row.rowData.colors）
}）;
}）;
Data.rowsDataSource =行;
编辑：
嗯，我找到了原因（该属性的处理的数据双赢的选项在base.js）：
VAR选项;
VAR optionsAttribute = element.getAttribute（数据双赢的选择）;
如果（optionsAttribute）{
选项= WinJS.UI.optionsParser（optionsAttribute，全局{
选择：createSelect（元素）
}）;
}
选项在全球的背景下，这意味着没有办法如何让当前处理的项目（在我的情况在行项）...
解决方法是创建自定义渲染器（全自定义控件）。这部分是这里描述的http://stephenwalther.com/archive/2012/05/23/metro-dynamically-switching-templates-with-a-winjs-listview.aspx - 见itemTemplateFunction
随着克里斯·塔瓦雷斯指出，嵌套的列表视图不支持。
然而，大的原因，这是不行的，是你需要一些如何获得下一个控制数据本身（可以忽略，这是一个列表视图现在）。
您已经尝试使用数据双赢的选项属性，正如你正确地指出，只有解析到全局命名空间来解决这个问题。
有是的工作围绕这个 - 使用数据绑定
您有：
＆LT; DIV数据双赢的控制=WinJS.UI.ListView
数据共赢选项={itemDataSource：colorsDataSource.dataSource，
ItemTemplate：它选择（'＃色'）}＆GT;
＆LT; / DIV＆GT;
删除 itemsDataSource 从数据双赢的选项，并将其移动到一个数据双赢的结合：
＆LT; DIV数据双赢的控制=WinJS.UI.ListView
数据共赢选项={ItemTemplate：它选择（'＃色'）}
数据共赢绑定=winControl.itemDataSource：colorsDataSource.dataSource＆GT;
＆LT; / DIV＆GT;
这假定colorsDataSource是关闭所呈现的项目的属性。例如你行对象。
要解决你的问题，嵌套，它看起来像你的父母列表视图可以走 - 只需创建动态元素根据您的数据源
I have problem with nested ListViews in a Windows 8 Metro application. I get error:
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
The code is:
<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>
The problematic line is:
data-win-options="{ itemDataSource : colorsDataSource.dataSource,
itemTemplate: select('#color')}"
The problem is that at the moment when the data-win-options is being evaluated the colorsDataSource is somehow not accessible - not sure why, because the data structure Data is static and initialized before the UI is even parsed (before args.setPromise(WinJS.UI.processAll());).
For example when I try modify the row template to this:
<div id="row" data-win-control="WinJS.Binding.Template">
<div>
<div>row</div>
<div data-win-bind="innerText: colorsDataSource.dataSource" ></div>
</div>
</div>
It outputs correctly [object Object]...
The javascript structure Data looks like this:
var rows = new WinJS.Binding.List([]);
model.rows.forEach(function (row) {
rows.push({
colorsDataSource : new WinJS.Binding.List(row.rowData.colors)
});
});
Data.rowsDataSource = rows;
EDIT: Hm, I found the reason (processing of the attribute data-win-options in base.js):
var options;
var optionsAttribute = element.getAttribute("data-win-options");
if (optionsAttribute) {
options = WinJS.UI.optionsParser(optionsAttribute, global, {
select: createSelect(element)
});
}
The options are evaluated in global context, that means there is no way how to get currently processed item (in my case the row item)...
Workaround is to create custom renderer (whole custom control). Which is partly described here http://stephenwalther.com/archive/2012/05/23/metro-dynamically-switching-templates-with-a-winjs-listview.aspx - see itemTemplateFunction
As Chris Tavares states, nested ListViews are not supported.
However, the bigger reason this doesn't work, is that you need to some how obtain the data itself on the next control (lets ignore that it's a list view for now).
You've tried to resolve this using the data-win-options attribute, which as you correctly pointed out only resolves to the global namespace.
There is a work around to this -- use a data binding.
Where you have:
<div data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : colorsDataSource.dataSource,
itemTemplate: select('#color')}">
</div>
Remove the itemsDataSource from data-win-options, and move it to a data-win-bind:
<div data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: select('#color')}"
data-win-bind="winControl.itemDataSource: colorsDataSource.dataSource">
</div>
This assumes that colorsDataSource is a property off the item that is being rendered. e.g. your row object.
To solve your nested problem, it looks like your "parent" listview could go away -- just create the elements dynamically based on your datasource.
这篇关于WinJS：嵌套列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
