WinJS 导航模板 + ListView

Question

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

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

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

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

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

这真的不是我想要的方式。我希望绑定在 HTML 中。

那么总结一下，在Navigation Template中绑定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 中设置声明式绑定，并使用数据上下文调用 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会重新加载，并重新布局。