javascript - WinJS 导航模板 + ListView

Question

我已经开始使用导航模板并尝试将 ListView WinControl 放入页面(而不是 home.html)中。插入 HTML 可以正常工作，Javascript 也可以正确执行。

然而，当尝试使用 data-win-options 绑定(bind) ListView 时，我遇到了一个问题，即我在 JS 的就绪处理程序中定义的命名空间尚不存在，因此应用程序抛出异常。

如果我在就绪事件之前定义命名空间，没有异常(exception)，但我在就绪处理程序中执行的对“公共(public)”变量的更新不会反射(reflect)在 ListView 中，只有当我再次导航回页面并进入页面时ListView 是否正确填充了数据。

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

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

这真的不是我想走的路。我希望绑定(bind)采用 HTML 格式。

所以综上所述，在导航模板中绑定(bind) ListView 的正确方法是什么？还是只有我有这个问题？

Answer 1

这里有几个移动部件。

首先，因为您拥有数据源的变量不是“可观察的”——它不会通知任何人它已更改。这不是 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 中设置声明式绑定(bind)，并使用数据上下文调用 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 时， ListView 将重新加载并重新布局。