1

次のコードでは、ノックアウト モデル プロパティSearchResultsを更新し、html のすべての列のサイズを再計算しています。_resizeColumns機能が正しく動作することはわかっています。ただし、DOM が検索結果で更新される前に実行されています。_resizeColumnsすべての div の background-color を黄色に更新することで、 が呼び出されていることを確認しました。モデルの更新前に存在していた div は黄色に設定されていますが、検索結果はそうではありません。

$.ajax({
    type: 'POST',
    url: 'foo.com',
    data: postData,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    processData: true,
    success: function(data) {
      model.SearchResults(data.d); // updates the DOM with the search results via knockout.js
      _resizeColumns();            // does not resize the columns because they haven't been added to the DOM yet
    },
    error: function() { alert('error'); }
});

検索結果は DOM に追加されます。これは、呼び出しの直後です。_resizeColumns

更新 ノックアウトが非同期で実行されているとは思わない。DOM を非同期的に更新するのは Web ブラウザ自体だと思います。

更新 2_resizeColumns()関数は、から直接呼び出されたときに機能し ます$(document).ready()。

更新 3 jquery セレクターを使用して幅を取得および設定する バージョンと_resizeColumns()、幅を取得するときに 2 次元配列に格納し、設定するときにその 2 次元配列にアクセスするバージョンの 2 つのバージョンがあります。2 次元配列バージョンはより高速に実行されます。2次元配列バージョンも、上記の元の質問で問題を引き起こします。jquery のみのバージョンにはありません。

4

2 に答える 2

2

私のアプリケーションでも、Knockout によってコンテンツがレンダリングされた後に列幅を設定する必要があるという同様の問題がありました。私の解決策は、テーブルが更新されるたびに更新される要素に配置できるカスタム バインディングを作成することでした<table>(同じ監視可能な配列にバインドされているため)。バインディングを同期的に実行しようとすると問題が発生しましたが、非同期で実行するのは簡単でした。これが私のバインディングです：

ko.bindingHandlers.fixColumnWidths = {
    update: function(element, valueAccessor) {
        if (ko.utils.unwrapObservable(valueAccessor())) {
            setTimeout(function() {
                $headings = $(element).find('thead th');
                if (!$headings.length) {
                    $headings = $(element.rows[0].cells);
                }
                $headings.width('').width(function(index, width) {
                    return width;
                });
            });
        }
    }
};
于 2013-10-02T19:36:29.300 に答える