9

Durandal テンプレートを使用して asp.net ソリューションに取り組んでいます。

ノックアウト対応のkoGrid( https://github.com/Knockout-Contrib/KoGrid )を使ってみました。このグリッドをデュランダルが管理するテスト ページに挿入すると、機能しません。グリッドは存在するように見えますが、正しく表示されません。

ウィンドウのサイズを変更すると、グリッドが正しく調整されることに気付きました。

この koGrid を Durandal/HotTowel テンプレートに統合することに成功した人はいますか?

問題を再現する手順:

  • 新しい ASP.NET MVC プロジェクトを作成し、Durandal テンプレートを選択します
  • プロジェクトに koGrid を追加します (Nuget で利用可能)
  • このグリッドをビューに配置し、ダミー データを追加します
  • グリッドを含むビューを実行して表示する

問題を再現するための小さな ASP.NET MVC プロジェクトを含む zip を次に示します: https://www.dropbox.com/s/15rphyhkqp1h8py/KOGrid-HotTowelTemplate.zip

ご協力いただきありがとうございます。

4

3 に答える 3

2

前のソリューションでは、グリッドが確実に表示されますが、少なくとも並べ替えは機能しません。上記の mikekidder がコメントしたように、問題の核心は、「KOGrid が Durandal/HotTowel でバインディングを行うとき、KOGrid 要素はまだ DOM の一部ではない」ということです。ビューがアタッチされるまで、KOGrid がバインディングを行わないようにする必要があります。これは次のようにして実現できます。

1) 新しいオブザーバブルをビューモデルに追加して、デュランダルによってビューがアタッチされているかどうかのブール値を保持します。

isAttachedToView = ko.observable(false)

そして暴露する

isAttachedToView: isAttachedToView

2) viewAttached 関数コールバックが呼び出されたときに true になるように更新します。

function viewAttached() {
    isAttachedToView(true);
    logger.log('viewAttached');
    $(window).trigger('resize');
    return true;
}

3) HTML を ko if ステートメントで囲み、ビューがアタッチされるまで HTML の一部が評価されないようにします (つまり、kogrid はバインディングを行いません)。

<!-- ko if: isAttachedToView() -->
    <div data-bind="koGrid: { data: ...

<!-- /ko -->

4) ビューの非アクティブ化時に isAttachedToView を false にリセットする

function deactivate() {
    isAttachedToView(false);
}

そしてこれを公開します：

deactivate: deactivate
于 2013-06-28T11:55:13.270 に答える
0

このアップデートはデュランダル 2.x に適用されます

Durandal 2.0 から、コンポジションが完了するまで保留するバインディングを指定する方法があります。

kogrid が正しく機能するために必要なのは、Durandal フレームワークの初期化の一部として次のコード行を実行することだけです。

composition.addBindingHandler('koGrid');

この例のcomposition変数は、Durandal コンポジション モジュールへの参照です。

詳細については、ドキュメントを参照してください: http://durandaljs.com/documentation/Interacting-with-the-DOM.html

于 2014-07-11T11:54:54.590 に答える