問題タブ [knockout-components]

ログインウィジェットを作成するために、ノックアウトのコンポーネント (require.js 経由でロード) を使用しています。

Javascript:

html

コンポーネント Javascript

コンポーネントの HTML スニペット:

これはすべて正常に機能しますが、オブザーバブルをパラメーターとして渡す代わりに LoginWidgetViewModel に移動しようとすると、モデルに正しくバインドされません。だから私が使うとき

それ以外の：

私は得る：

助言がありますか？

私は Knockout の経験が豊富ですが、コンポーネントを使用するのはこれが初めてなので、明らかな何かが欠けていることを本当に望んでいます! 私の問題を説明するために、ユースケースを少し単純化しようとします。

Index という HTML および JS ファイルがあります。Index.html にはコンポーネントのデータ バインドがあり、Index.js にはko.components.register呼び出しがあります。

索引.html

Index.js

次に、別の HTML および JS ファイル (Section.html および SectionViewModel.js) があります。上記でわかるように、SectionViewModel は、コンポーネントのビュー モデルとして指定したものです。

Section.html

SectionViewModel.js

SectionViewModel のコンストラクターの一部として、API を呼び出して、ビュー モデルに入力するために必要なすべてのデータを取得します。この API 呼び出しは、テンプレートで使用する必要がある HTML も返します (基本的には、Section.html から読み取られます)。

明らかに、このコンストラクターは applyBindings を呼び出すまで呼び出されないため、API 呼び出しの成功ハンドラーに入ると、コンポーネントのテンプレートは既に既定のテキストに設定されています。

私が知る必要があるのは、このテンプレートを更新することは可能ですか? 上記のように、成功ハンドラーで次のことを試しました。

これにより、実際に既定のテキストが API から返された html に置き換えられますが (デバッグ ツールで見られるように)、この更新はブラウザーに反映されません。

基本的に、私が本当に求めているのは、バインド後にコンポーネント テンプレートのコンテンツを更新する方法はありますか?

あなたが考えるかもしれない上記を解決するオプションはテンプレートを要求することであることは知っていますが、私は上記を本当に単純化し、完全な実装ではこれを行うことができないため、なぜ HTML が API によって返されるのか.

どんな助けでも大歓迎です！現在、機能するソリューションがありますが、JSコードを構造化して機能させる方法が本当に好きではないため、上記のソリューションが理想的です。

ありがとう。

次のカスタム要素に相当する構文はありますか?

以下を試してみると、オブジェクトDayOfWeekUtilizationがコンポーネントに渡されません。代わりに、$raw プロパティを持つオブジェクトが渡されます。

私のオブジェクトDayOfWeekUtilizationには多くのさまざまなプロパティがあるため、HTML 内でプロパティを分割したくありません (Javascript で駆動する必要があります)。最初の構文は機能しますが、他の場所ではカスタム要素構文を使用しているため、私のコードでは奇妙に見えます。

「Knockout Google Maps」をグーグルで検索すると、KO ベースの Google マップの実装がかなり見つかります。私が見つけることができたものはすべて、カスタム バインディング ハンドラーを使用するアプローチを採用していましたが、当初はそれを Knockout コンポーネントとして実装するつもりでした。

例:

• http://www.codeproject.com/Articles/351298/KnockoutJS-and-Google-Maps-binding
• http://www.hoonzis.com/knockoutjs-and-google-maps-binding/
• https://github.com/manuel-guilbault/knockout.google.maps

ここでKOコンポーネントよりもカスタムバインディングハンドラーを好む理由を誰かが正しい方向に向けることができますか?

私の計画されたユースケースはこれです：

住所検索結果のリストを含むページを実装しています。これまでのリストは KO コンポーネントであり、各リスト エントリは、リスト コンポーネントが foreach バインディングで繰り返し呼び出す別の KO コンポーネントによって生成されます。この検索結果のリストの横に、結果エントリもマップに表示する Google マップが必要です。また、リスト、リスト エントリ、およびマップの間には、非常に多くの相互作用があります。

ここに私がこれまでに持っているものがあります:

次のコンポーネントがあります。

このコンポーネントを以下のビューモデルと一緒に使用しています。監視可能なリストの項目はさまざまなタイプで、さまざまなプロパティがあります。

このコンポーネントは非常にうまく機能し、入力ボックスのテキストを変更するたびに基になるデータが更新されます。

ここで、オブザーバブルのロジックをコンポーネント自体にカプセル化したいので、コンポーネントを次のように変更しました。

...そして今、私は観察可能なitems.choiceを内部にデータだけで持っています:

2 番目の例で、items.choice はまだ監視可能であるにもかかわらず、メイン ビューモデルの基になるデータが更新されないのはなぜですか? いくつかの概念が欠けていると確信しています。おそらく、監視可能な配列の各項目も監視可能である必要がありますが、2番目の例を機能させる方法があるかどうかはわかりません。

最初の例: http://jsfiddle.net/5739ht0q/2/ 2 番目の例: http://jsfiddle.net/079tx0nn/

私はノックアウトを学んでおり、以下の小さな例を試しています。私が持っている 3 つのファイルは次のとおりです。

開発には netbeans IDE を使用しています。

index.html

viewModels - 導入.js

ビュー -introduction.html

希望の出力が得られません。望ましい出力は、以下のリンクのようなものです

http://learn.knockoutjs.com/#/?tutorial=collections