Question

我有一个带有列表视图的WinJS应用程序，其中如果在列表视图完全加载之前在页面之间快速导航，则下一页显示列表视图，其中所有元素都绑定为“未定义”。

所以说我有一个带有“待办事项”的集线器页面，过滤后只显示6个项目，并且有一个标题导航到完整的“待办事项”页面，当显示集线器页面但在它之前已完全加载我点击标题链接到“待办事项”页面，然后应用程序转到“待办事项”页面，但这些项目显示为磁贴中的所有属性为“未定义”。

我使用IndexedDB作为我的数据存储。

我的主页代码如下：

WinJS.UI.Pages.define("/pages/home/home.html", {
    ready: function (element, options) {
        WinJS.Utilities.query("a").listen("click", function (e) {
            e.preventDefault();
            WinJS.Navigation.navigate(e.currentTarget.href);
        }, false); 

        viewModel = new HomeViewModel(element);
        viewModel.load(); //loads from indexed db

    },
    //etc...

To Do Page：

 WinJS.UI.Pages.define("/pages/ToDo/ToDo.html", {
        ready: function (element, options) {    
            viewModel = new ToDoViewModel(element);

            viewModel.load();
        },
etc//

我知道没有什么可以去的，但任何想法都会受到赞赏。

关于如何调试这样的东西的提示也很棒。

更新

我将它缩小到Hub Page：

中的这一行

myLib.GetData(todaysDate, function (result) {
  that.trendsModel.today = result;
  WinJS.Binding.processAll(that.el.querySelector("#dataPanel"), that.trendsModel); //<--Right Here
});

如果删除它，那么当我加载第二页时，数据不会显示为未定义。有趣的是，数据最初在第二页上正确显示，然后变为“未定义”。

解决方案

我的修复：

myLib.GetData(todaysDate, function (result) {
  var element = that.el.querySelector("#dataPanel");

  that.trendsModel.today = result;

  if(element) {
    WinJS.Binding.processAll(element, that.trendsModel); 
  }
});

当回调返回时，我已经在第二页。因此未找到返回null的选择器。如果你将null传递给processAll它会尝试绑定整个页面，这就是为什么我能够在一秒钟内看到正确的数据然后它变为未定义的......哇，真是太多了。我想这很有意义，但找到了什么痛苦。

希望它能在将来帮助某人：）

Answer 1

您的ToDoViewModel和HomeViewModel需要可观察。这意味着他们需要从WinJS.Binding.mixin混入，并且对于您异步提取的属性，他们需要从属性设置器中调用this.notify("propertyName", newVal, oldVal)。

请注意，您需要具有getter / setter属性。 e.g。

var bindingBase = WinJS.Class.mix(function() {}, WinJS.Binding.mixin);
WinJS.Namespace.define("YourNamespace", {
    ToDoViewModel: WinJS.Class.derive(bindingBase, function constructor() {
    }, {
        _titleStorage: "",
        title: {
            get: function() { return this._titleStorage; },
            set: function(newValue) {
                if(newValue === this._titleStorage) {
                    return;
                }

                var old = this._titleStorage;
                this._titleStorage = newValue;
                this.notify("title", newValue, old);
             }
        }
    }),
});

Answer 2

myLib.GetData(todaysDate, function (result) {
  var element = that.el.querySelector("#dataPanel");

  that.trendsModel.today = result;

  if(element) {
    WinJS.Binding.processAll(element, that.trendsModel); 
  }
});

当回调返回时，我已经在第二页。因此未找到返回null的选择器。如果你将null传递给processAll它会尝试绑定整个页面，这就是为什么我能够在一秒钟内看到正确的数据然后它变为未定义...哇，什么是doozy。我想这很有意义，但找到了什么痛苦。

WinJS Listview在快速导航时显示未定义

更新

解决方案

2 个答案: