3

私のサイトには次の設定があります。これは、標準のブラウザーと通常のモバイル ブラウザーで素晴らしく動作します。

モデル：

function SearchTerm(data) {
    this.Term = ko.observable(data.Term);
    this.Stamp = ko.observable(data.Stamp);
}

ビューモデル:

function HistoryViewModel() {
    //Data
    var self = this;
    self.searchTerms= ko.observableArray([]);

    // Load history from server
    $.ajax({
        type: "GET",
        url: "/api/history/",
        data: null, 
        success: function (msg) {
            var terms = $.map(msg, function (item) { return new SearchTerm(item) });
            self.searchTerms(terms);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            // Error Handling
        }
    });
}

意見：

<div class="title">
            Search History
            <div class="closeBtn"></div>
        </div>
        <div id="historySection">
            <ul class="searches" data-bind="foreach: searchTerms">
                <li class="historyItem">
                    <div class="timestamp"><span data-bind="'text': Stamp"></span></div>
                    <span data-bind="'text': Term"></span>
                </li>
            </ul>
            <a class="loadMore">Load 10 More Searches &raquo;</a>
        </div>

これはすべて、私がテストしたすべてのもので完全に機能しますが、1 つの大きな例外があります: Android の WebView コントロールです。そこでこのページを実行すると、次の例外が発生します。

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: Stamp is not defined;
Bindings value: 'text': Stamp at {url}/Scripts/libs/knockout-2.2.1.js:5

私は機知に富んでいます。データ バインド構文の可能なすべての組み合わせを試しました (シングル クォーテーションも試しました。これに関連する投稿をある時点で見たことがあります)。私の唯一の推測は、これがスクリプトの順序に関連している可能性があるということです。現在、jquery を参照する前にノックアウトを参照していますが、これが問題になる可能性はありますか? 私はこれを他のどこでも問題として見たことがありませんでしたが、現時点では、何でも試してみるつもりです.

更新：

私の他のノックアウト バインディングのビューモデルとバインディングはすべて Android で正常に動作していますが、ページの読み込み時に発生するものはありません。そのため、ajaxをメソッドに変更し、呼び出しを遅らせようとすることにしました。そこで、ビューモデルに次の追加を実装しました。

//Operations
self.loadRecent = function () {
        // Load search history
        $.ajax({
            type: "GET",
            url: "/api/history/",
            data: null,
            success: function (msg) {
                var terms = $.map(msg, function (item) { return new History(item) });
                self.history(terms);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                //Error handling
            }
        });

私のページでは、最初のバインディングは次のようになります。ページの下部にあります。

var history = new HistoryViewModel();

ko.applyBindings(history, $("#historySection")[0]);
//Call page event handlers
$(window).load(function () {
    // Load in our search history
    history.loadRecent();
});

残念ながら、以前と同じエラーです。ただし、これは物事が本当に興味深いところです。loadRecent 操作の呼び出しをコメント アウトしても、エラーが発生します。私にとって、これは、なんらかの理由で、このモデルについてのみ、何も存在しないにもかかわらず foreach がまだ反復しようとしていることを意味します。私の仮定は正しいですか？この問題を引き起こす可能性のある、ここで露骨に欠けているものを見た人はいますか? 私の他のビューモデルとビューには、この問題はありません。他に 2 つバインドしていますが、どちらも foreach が含まれており、この問題は発生していないようです。

UPDATED 2013.05.20 history という名前の変数と history という名前の関数を持っていると、何かがおかしくなっているのではないかと心配し始めたので、私が行った関数/オブジェクトの名前変更を反映するために、全体のコードの一部を更新しました (愚かな、私は知っています) 、しかし私は絶望的です）。

また、追加の調査結果を投稿したいと思いました。私は先に進み、履歴を完全にロードするためのコードをロード イベントまたは準備完了イベントから削除してみることにしました。むしろ、このデータ ロードをボタン クリックに分離することができました。ボタン クリック ハンドラは次のようになります。

 $(".menuButton").on("click", "", function () {
        history.searchTerms([]);
        history.loadRecent();
    });

ただし、Android のみでこれを行うと面白い事実です。バインディングで、ロード時にまだエラーが発生します。

 Uncaught Error: Unable to parse bindings.
 Message: ReferenceError: searchTerms is not defined;
 Bindings value: foreach: searchTerms at {url}/Scripts/libs/knockout-2.2.1.js:5

もう 1 つの興味深い情報 - ビューから html を完全に削除した場合、つまりバインディングがなくても SearchTerm モデルと HistoryViewModel のコードを残したままにしておくと、Android の WebView からエラーが発生します。クリック:

 Uncaught TypeError: Object #<History> has no method 'searchTerms' at {url}:681

たくさんの投稿で申し訳ありませんが、これの何が問題なのかを突き止めたいと思っています。

4

1 に答える 1