8

3.2.0 を使用して、ネストされた KnockoutJS コンポーネントの階層があります。非常にうまく機能していますが、コンポーネントの階層全体がロードされてレンダリングされたら、いくつかのコードを実行しようとしています。これは、afterRender() とほぼ同等であり、afterRender と同じ一般的なユース ケースに必要です。

私はいくつかのアプローチを試しましたが、これまでのところ運がありません:

  1. 以下をルート テンプレートに追加しましたが、ネストされたコンポーネントが読み込まれる前に呼び出されるため、早すぎます。 <!--ko template: {afterRender: onLoad.bind($data)} -->
  2. 最新の 3.3.0-alpha を使用し、すべてのコンポーネントで synchronous:true を指定します。しかし、私は AMD を使用しているため、コンポーネントは依然として非同期で「ロード」されていると考えています。
  3. 対応するコンポーネントがロードされたときにのみ解決される遅延オブジェクトのコレクションを構築しようとしました。これは非常に複雑になり、まだ説明しない理由で機能しませんでした。

ノックアウトjsコンポーネントの完全な階層がロードされてレンダリングされたら、コールバックを呼び出す方法はありますか? ありがとう！

この 2 つのスレッドに出くわしたばかりなので、他の人もこれを探しているようです。既存の回避策との主な違いは、ネストされたコンポーネントでは機能しないことです。

4

3 に答える 3

2

これが私のために働いたものです。同期コンポーネントと非同期コンポーネントを混在させたり、カスタム コンポーネント ローダーを使用したりするなど、考えられるすべてのバリエーションを試したわけではありません。

KO 3.3.0 には、すべてのコンポーネントのロードが通過するメソッドがあります。

ko.components = { get: function(componentName, callback) { ...

getメソッドは必要な で呼び出され、コンポーネントcomponentNameがロードされたときに acallbackが呼び出されます。

したがって、実行する必要があるのは、呼び出しごとにラップko.components.getしcallbackてインクリメントし、実行後にデクリメントすることだけです。カウントがゼロになると、すべてのコンポーネントがロードされたことを意味します。pendingComponentsCountcallback

25 行の JS コード (underscorejs を使用)。

ko.applyBindingsまた、 がコンポーネントに遭遇しなかったという特別なケースを処理する必要があります。このケースでは、すべてのコンポーネント (すべてゼロ) がロードされたことも意味します。

繰り返しますが、これがすべての状況で機能するかどうかはわかりませんが、私の場合は機能しているようです。これが簡単に壊れる可能性があるいくつかのシナリオを考えることができます (たとえば、ko.components.getラップする前に誰かがへの参照をキャッシュする場合)。

于 2016-04-01T14:41:05.923 に答える
1

ko.components を使用している場合、これが役立つ場合があります。

1) 各コンポーネントの読み込みを追跡する遅延オブジェクトを作成する

var statusX = $.Deferred()
var statusY = $.Deferred()

2）コンポーネントがロードされて準備ができたときに通知するノックアウトを通知する

ko.components.get('x-component', statusX.resolve) //Note: not calling resolve, but passing the function
ko.components.get('y-component', statusY.resolve)

3) 両方のステータス保留を同期する

$.when(statusX.promise(), statusY.promise())
 .done( function allComponentsLoaded(componentX, componentY){ 
            //Both components are ready here 
            //Note the arguments from the function comes via
            //ko->jquery deferred resolve
           });
于 2015-02-13T14:09:31.047 に答える