1

我从导航模板开始，并尝试将 ListView WinControl 放入页面（不是 home.html）。插入 HTML 可以正常工作，Javascript 也可以正确执行。

但是，当尝试使用 data-win-options 绑定列表视图时，我遇到了我在 JS 中的就绪处理程序中定义的命名空间尚不存在的问题，因此应用程序会引发异常。

如果我在就绪事件之前定义命名空间，也不例外，但我在就绪处理程序中执行的“公共”变量的更新不会反映在 ListView 中，只有当我再次导航回页面时，才是 ListView正确填写数据。

我发现现在使 ListView 工作的唯一方法是直接更新

document.getElementById('myListView').winControl.itemDataSource

这真的不是我想走的路。我希望绑定在 HTML 中。

所以总结一下，在Navigation Template中绑定ListView的正确方法是什么？还是只有我一个有这个问题？

4

1 回答 1

2

这里有几个活动部分。

首先，因为您拥有数据源的变量不是“可观察的”——它不会通知任何人它已更改。这不是 JavaScript 本质上可以做到的。

其次，您已经通过data-win-options存储桶传递了它——它只是捕获了值，并没有努力去观察它。

有几种方法可以解决这个问题：

a）利用您找到的方式，但使您的变量可观察，并通过添加更改处理程序在更改时传输值。这不是您想要的声明性，但也不错。

var yourVariable = WinJS.Binding.as({ dataSource: null });
yourVariable.bind("dataSource", function(oldVal, newVal) {
    document.getElementById("yourListView").winControl.itemDataSource = newVal;
});

yourVariable.dataSource = getMyDataYo();

b) 在 HTML 中设置声明式绑定，并使用数据上下文调用 WinJS.Binding.processAll()。

HTML：

<div data-win-control="WinJS.UI.ListView"
     data-win-options="{ itemTemplate:... }"
     data-win-bind="winControl.itemDataSource: dataSourceProperty"
</div>

JS：在你准备好的处理程序中：

var dataContext = WinJS.Binding.as({ dataSourceProperty: dataSourceInstance });
WinJS.Binding.processAll(element, dataContext);

如果您保存了 dataContext 实例，那么当您dataSourceProperty将来使用新的数据源设置时，列表视图将重新加载，并重新布局。

于 2012-09-22T15:53:29.273 回答