0

リストビューを備えた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...

ページを実行するには：

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

            viewModel.load();
        },
etc//

行くことはあまりないことは知っていますが、どんなアイデアでもいただければ幸いです。

また、このようなものをデバッグする方法のヒントも素晴らしいでしょう。

アップデート

ハブページから次の1行に絞り込みました。

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

これを削除すると、2番目のページを読み込んだときに、データが未定義として表示されません。興味深いのは、データが最初に2ページ目に正しく表示され、その後「未定義」に変わることです。

解決

私の修正：

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

  that.trendsModel.today = result;

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

コールバックが戻った時点で、私はすでに2ページ目にいます。そのため、nullを返すセレクターが見つかりませんでした。nullをprocessAllに渡すと、ページ全体をバインドしようとします。そのため、正しいデータを1秒間表示できたので、未定義に変わります。私はそれが理にかなっていると思いますが、見つけるのはなんと苦痛でしょう。

それが将来誰かに役立つことを願っています:)

4

2 に答える 2

1

ToDoViewModelとHomeViewModelは監視可能である必要があります。つまり、からミックスインする必要がWinJS.Binding.mixinあり、非同期でプルするプロパティの場合はthis.notify("propertyName", newVal, oldVal)、プロパティセッターから呼び出す必要があります。

getter/setterプロパティが必要であることに注意してください。例えば

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);
             }
        }
    }),
});
于 2012-11-30T19:32:29.990 に答える
0 
myLib.GetData(todaysDate, function (result) {
  var element = that.el.querySelector("#dataPanel");

  that.trendsModel.today = result;

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

コールバックが戻った時点で、私はすでに2ページ目にいます。そのため、nullを返すセレクターが見つかりませんでした。nullをprocessAllに渡すと、ページ全体をバインドしようとします。そのため、正しいデータを1秒間表示できた後、undefinedに変更されます...うわー、なんてこった。私はそれが理にかなっていると思いますが、見つけるのはなんと苦痛でしょう。

于 2012-12-02T17:20:29.067 に答える