問題タブ [knockout-components]

ノックアウト 3.2.0 で新しいコンポーネント システムを使用しようとしています。

現時点では多くのドキュメントはありませんが、これは機能します。

ただし、templateバインディングを使用すると、次のように DOM に既に存在するテンプレート名を指定できます。

次に、これを行うことができます：

だから私はこれを試しました：

しかし、うまくいきません。新しいコンポーネントで名前付きテンプレートを使用する方法はありますか、それともインラインであるか、AMD でロードする必要がありますか?

ありがとう

編集：RP Niemeyerの回答の後、明確にするために、私が彼の回答を試したテンプレートを次に示します。

コンポーネントコードは次のとおりです。

テンプレートはロードされますが、エスケープされた文字列として扱われます。

アイデア？

以下は、単純なコンポーネントを作成する例です。http://knockoutjs.com/documentation/component-binding.html#component-lifecycleによるとdispose、コンポーネントが DOM から削除されたときに ko によって呼び出される関数を追加することができます。ステップ 5 The component is activeにフックできるようなものを探しています。

コメントで要求された追加情報

以下の例では、a) によって作成された DOM フラグメントを挿入し、ko componentb) DOM にアタッチされたら、<ul>を kendo PanelBar に変換します。compositionCompleteこれは、デュランダルのイベントを使用して実行できる方法と非常によく似ています。おそらく他の解決策がありますが、ノックアウトコンポーネントを使用してこれを達成できるかどうか、またはどのように達成できるかを知りたいです。

テンプレート

ビューモデル

ノックアウト 3.2 の新しいコンポーネント機能に取り組んでおり、requireJS を使用してコンポーネントをロードしようとしています。しかし、私は奇妙な問題を抱えています。基本的に、レジスタ関数でビュー モデルをハードコーディングすると、すべて正常に動作します。requireJS を使用してまったく同じビュー モデルを読み込もうとすると、正しく動作しません。

コンポーネントをロードするための html のサンプルを次に示します。

このコンポーネントがロードするテンプレートの html は次のとおりです。

以下に示すように登録関数を作成すると、すべてが期待どおりに機能します (つまり、これが読み込まれると、ユーザーが「追加」リンクをクリックするまで「テスト」テキストは表示されません)。

しかし、requireJS を使用してビュー モデルをロードするようにこれを変更しようとすると、機能しません。「テスト」テキストは、ユーザーが「追加」リンクをクリックしなくてもすぐに表示されます。ビューモデルのオブザーバブルはどういうわけか台無しになっています。

スクリプト ファイルの内容は次のとおりです (ビュー モデルは同じであることに注意してください)。

レジスタ関数は次のようになります。

問題のデバッグ中に、knockout-3.2.0 の resolveViewModel 関数にチェックを追加しました。new viewModelConfig(params) を呼び出した後、「追加」がオブジェクトのオブザーバブルかどうかを確認します。ビュー モデルがレジスタ関数でハードコードされている場合、true が返されます。requireJS を使用してビュー モデルをロードすると、false が返されます。

ここで私が間違っていることについてのアイデアはありますか?

Knockout コンポーネントが読み込まれ、viewModel がビューにバインドされた後にイベントをキャッチする方法はありますか?

Knockout コンポーネントを使用してカスタム ポップアップを作成したいのですが、ポップアップは読み込みが完了した後にのみ開く必要があります。

ポップアップを開いたとき

ノックアウト 3.2 でカスタム コンポーネントを進めようとしています。事前定義されたパラメーターを使用している場合、すべてがうまく機能します。たとえば、これはjsFiddleです。

しかし、ビューモデルからパラメーターを渡すと (ここで方法を読みました)、何も取得できません: jsFiddle。私は何を間違っていますか？

ここに私のjsコードがあります:

新しいノックアウト バージョン 3.2 (および requirejs) を使用して 2 つのノックアウト コンポーネントを作成しました。

最初のコンポーネントには、コンポーネントの場合、ビューモデルの監視可能な配列に含まれるオブジェクトのテーブルを表示するための html テンプレートが含まれています。

2 番目のコンポーネントには、最初のコンポーネントから選択した項目の値を編集するためのモーダルを表示するための html テンプレートが含まれています。

ご覧のとおり、最初のコンポーネントから選択した ID を伝達するために pubsub を使用しました。これは、選択したソース項目の詳細を取得するためにサーバーと通信するための ID を必要とするコンポーネントに使用されます。ただし、選択したアイテムを編集する場合、すべてのデータはクライアントで既に認識されているため、追加の ajax リクエストは解決策にならないため、完全な sourceEntry オブジェクトを伝えたいと考えています。

これは、ノックアウトポストボックスの pubsub 実装を使用して可能ですか?

次の質問はおそらく簡単なものです。コンポーネントのモデルは、編集時にのみロードする必要があります。非表示セクションは、パフォーマンスを考慮すると意味がありません。ノックアウトを使用して実行時にコンポーネントを動的に注入する方法はありますか、またはコンポーネントを動的に追加するには jquery が必要ですか。ここでのベストプラクティスは何ですか?

コンポーネントとrequireを含むノックアウト3.2を使用して、監視可能な配列を更新するのに問題があります。宣言時にビューモデルの配列に項目を手動でプッシュできますが、ajax 呼び出しを介して項目をプッシュするか、ボタンのクリックでハードコーディングされたプッシュを介して項目をプッシュすると、DOM は更新されません。

デバッグすると、配列に項目が含まれていることがわかりますが、DOM は更新されていません。どんな助けでも大歓迎です。

Default.html

Template.html

Startup.js

Template.js

ko.applyBindings() 呼び出しの後にコンポーネント バインディングを適用する方法はありますか?

ポイントは、requireJS を使用してモジュール/コンポーネントを非同期にロードすることです。では、すべてのバインディングが登録されていることをどのように確認すればよいでしょうか?

デモ JS フィドル