問題タブ [custom-binding]

ビューモデルでフィールド (「タイプ」) が変更されるたびに dom 要素を再初期化するために使用されるカスタム バインディングがあります。これは更新コールバックで定義されます。

簡素化されたデモについては、このjsFiddleを参照してください。

私が理解しているように、更新が呼び出される条件の1つは次のとおりです。

カスタムバインディングの仕組み

同じ data-bind 属性の別のバインディングがトリガーされたとき。これにより、オプションが変更されたときに値などを適切に保つことができます。

私が抱えている問題は、ビューモデルの値が変更されるたびに、この更新コールバックも呼び出されることです。

だから...次のいずれかが可能ですか：

1. バインディングの 1 つがカスタム バインディングを呼び出さないようにします。
2. カスタム バインディング内の呼び出し元を検出します。

ノックアウト (および mvc) と組み合わせてブートストラップ コンボボックス プラグインを使用することに関して質問があります。

テンプレートで Dropdownlisfor、textboxfor などの既製の MVC html ヘルパーを使用している状況があります。Knockout を使用して、データのコレクションをテンプレートにバインドしています。mvc html ヘルパーは、DropDownlistfor ヘルパーの「選択」コントロールを作成します。必要なすべての検証属性などが設定されるように、コントロールでブートストラップ プラグインを呼び出す前に、これをレンダリングする必要があります。私は最初に afterrender を使用し、そのメソッドで「選択」コントロールを見つけ、その上でプラグインを呼び出しました。

私たちの問題は、ブートストラップ コンボボックス コントロールを別の場所で同様の方法で使用する必要があるたびに、これを実行したくないということです。そのため、私はカスタム バインディングについて調査しており (最初に行っておくべきでした)、自分の状況でカスタム バインディングを使用する方法について質問がありました。

彼がブートストラップ タイプ ヘッド コントロールのカスタム バインディングを作成したこの記事を見つけました。コンボボックスに似たものを作ることができます。ただし、コントロールがレンダリングされた後にのみ呼び出すことができます。では、KO を指定して、すぐにではなくカスタム バインディングの「afterrender」のみを実行する方法はありますか。このようにして、選択コントロールがレンダリングされ、選択コントロールのカスタム バインディングでプラグインを呼び出すことができます。

ここにいくつかの詳細情報があります。

テンプレートを使用するテーブルがあります

これに似たテンプレートがあります

指定された KO バインディングで選択コントロールを生成する独自の html ヘルパー (KnockoutDropDownListFor など) があります。

どのような方法がよいか提案してください。さらに情報が必要な場合はお知らせください。

SO で見つけたコードを使用しています (ここでの 2 番目の回答: knockout.js - deferred databinding for modal? )。

ただし、詳細はフォームに表示されません。

ビューコードは次のとおりです。

データが editTransaction に割り当てられると、ダイアログが表示されます - pre ko.toJSON デバッグ HTML はこれを表示します:

モーダルが初期化されたとき（ページがロードされたとき）にデータが利用できないというコメントを検索して見ましたが、それは私には意味がありません（ポイントバインディングは、ビューがデータのときに更新されると信じています変更され、デバッグステートメントも正常に機能しています)。バインディング コードで with を使用せずに、またデータ バインド テキストで $root への参照を使用してみました。

だから、それがうまくいかない理由は素晴らしいでしょう。

既存の値をフェッチしてビューモデルに挿入するカスタムバインディングに取り組んでいます。ただし、ko.bindingHandlersで提供された要素に子要素がないように見える問題が発生しました。

これはKnockoutJSでどのように機能するのですか、それとも何かが足りないのですか？

これが私のHTMLマークアップです：

そして、これが私のJSコードです。

こちらのjsFiddleでもご覧いただけます：http：//jsfiddle.net/dzul1983/XjD3Y/1/

現在のプロジェクトでは、knockout.jsとhammer.jsの両方を使用しています。Hammer.jsで「tap」イベントのカスタムバインディングハンドラーを作成しました（これは、holdやswipeなどの他のイベントでも機能するはずです）。私の問題は、このバインディングハンドラーで、HTMLのdata-bind属性で提供するメソッドを呼び出したいということです。ノックアウトのドキュメントによると、valueAccessor（）を呼び出す必要があることがわかりましたが、残念ながら、これでは何も実行されません。私はこのフィドルを作成しました。これは私の問題の明確な例を与えるはずです。助けてくれてありがとう。

HTML：

JS：

テンプレートバインディングに基づいてカスタムバインディングを作成しようとしています。アイデアは、独自のビューモデルクラスを持つテンプレートを持つことですが、そのクラスのインスタンスを親ビューモデルに追加したくありません（少なくともコードではありません。実行時にインスタンスを追加しても問題ありません）。

ここで達成しようとしていることを理解するには、例を示します。高度なスライダーを作成したい、スライダーのhtmlをテンプレートに入れたくない、スライダーは独自のクラスである必要があるが、スライダーのビューモデルインスタンスを追加したくない親ビューモデルに。これが私のコードです。最初は機能し、最初はテンプレートをレンダリングしているように見えますが、例外がスローされ、理由がわかりません。ここで作業コードを表示

html：

js：

オブザーバブルの作成をカスタムバインディング内にカプセル化しようとしています。これは、knockoutjs-validationのisValidによく似ていますが、このプロパティは将来、複雑な一連のイベントを記録する別のバインディングの結果になるため、バインディングを拡張しません。入力すると、これにカスタムバインディングを使用する以上のことをすべきではないように感じます。

次のコードは、オブザーバブルの作成を担当するカスタムバインディングを示しています。

私が抱えている問題は、applyBindingsコマンドの一部が実行された後にオブザーバブルが作成されたように見え、ビューの後方バインディングのみがオブザーバブルの正しい値を確認できることです。

動作を示すためにjsfiddleを作成しました。その中で、IsRed問題のオブザーバブルです。

http://jsfiddle.net/ricardomp/c2HnJ/15/

期待される結果は、同じ値の前後の赤い背景とスパンタグの入力になります。

その結果を達成するために私は何ができますか？結果のバインディングは、外部のオブザーバブルやプロパティに依存するべきではありませんよね？別の実装を提案しますか？

前もって感謝します。

アップデート：

myBindingは、複数のバインディングをカプセル化するバインディングであることに言及する価値があると思います。したがって、IsRedのように、同様のオブザーバブルに3つまたは4つのバインディングが割り当てられます。

最終更新：

RPの回答の後、オブザーバブルの初期化を実行するために次のコードを記述しました。

その後、初期化中にobservableでcolorStatusを呼び出すだけで済みました。

そしてそれがすべてです。

このようなカスタム バインディングに HTTPS および HTTP サポートを追加することは可能ですか?

終点：

私はこれを行う方法を数日間試し、構築されたソリューションを探しましたが、残念ながら成功しませんでした。

カスタムメイドのeコマース製品の管理セクションを作成しています。この管理領域は、完全にSPA（シングルページアプリケーション）として構築されており、AJAX呼び出しを介して「ko」テンプレートとそのデータを動的にロードします。

さて、当面の問題は、このkoテンプレート内にグラフ、円、およびその他のデータ視覚化要素を含めたいということです（つまり、ダッシュボードテンプレートでグラフにうまく表示された要約データ）。

このために、適切に呼び出されるGoogleChartAPIの「KOカスタムバインディング」に取り組んでいます。

これは私が今まで持っていたものであり、固定チャートを作成します（このサンプルからKOに適合）

次に、テンプレートからバインディングを呼び出し、「false」を渡すか、viewModelからダミーのko.observableを渡します。

さて、ついに（申し訳ありませんが、とても時間がかかりました）、私が抱えている問題は次のとおりです。

その後、google.load("visualization", "1", { packages: ["corechart"] });「要素」のコンテンツにアクセスできなくなり（レピュテーションの問題については初心者なので、IDEからのキャプチャを投稿できません）、コールバックが失敗し、グラフがレンダリングされません。'google.load'を呼び出す前に、'element'の内容はすべてそこにあり、アクセス可能です。次にJavascript runtime error: Access is denied、コールバックが呼び出されたときにを取得します。

私はこれで立ち往生しているので、いくつかの助けを得ることを願っています。ありがとう！ルイス

同じオプションを持つ 2 つの選択入力があり、最初の選択で値を変更すると、2 番目に選択したもの (含む) の以前のオプションがすべて無効になり、2 番目の選択の値が最初の次の値に設定されます。ここで作業フィドルをセットアップしました。

カスタム バインディング ハンドラを作成しました。

そして、最初の選択を変更すると、2番目の以前のオプションがすべて無効になり、2番目の値が最初の次の値に設定される場合に機能しますが、問題は、ユーザーが2番目の値を変更したい場合、更新のために変更できませんでしたfrom custom binding は常に first に従って値を設定しています。私の質問は、valueAccessor() オブザーバブルの変更から、または 2 番目の選択を変更して手動で、カスタムバインディングで値がどのように更新されるかを知る方法です。