問題タブ [javascript-databinding]

現在、バックグラウンドで非同期に更新される何百もの JS オブジェクトで構成されるアプリケーションを作成しています。iframe で作成された複数のパネルを使用して、HTML のさまざまなオブジェクトを視覚化できます。

課題: オブジェクトが更新されるとすぐに、更新されたプロパティ/属性を表示する対応する HTML 要素が自動的に更新される必要があります。HTML 要素に発生する変更は、必ずしもオブジェクトに影響を与える必要があります。私が見た双方向のデータバインディング ライブラリの多くは、私のニーズを誇張する方法です。

Object.observe を使用して効率的なものを書くことは可能ですか? 現在、私は次のことを試しました(これは機能します)が、パフォーマンスが悪く、HTMLが既に削除された後(パネルが閉じられたか、新しいオブジェクトが開かれた後)、オブジェクトが監視され続けます:

main.html:

panel.html

「obj.param1 = 0;」を設定します main.html のコンソールで、すべての要素が必要な方法で正確に変更されます。特に要素が常に作成および削除されている場合、これを達成するためのよりエレガントな方法はありますか?

コメントやアイデアをお寄せいただきありがとうございます。

編集:同様の課題に悩まされている人のために、私の問題のほとんどを解決する小さなライブラリを作成することになりました: github.com/weltwinkel/.b

私は既存の Web フォーム アプリケーションに取り組んでいます。私は強く型付けされたデータリストを持っています。ASP.NET Webフォームページにドロップダウンがあるので、ユーザーがドロップダウンリストからアイテムを選択すると、それに応じて学生リストを返す ajax 呼び出し WebMethod が静的メソッドを使用しているため、コードビハインドでデータソースをバインドできないので、 JSON 形式でデータを送信し、ASP.NET Web フォーム グリッド 'StudentFilterList_Grid' にバインドする必要があります。

コード ビハインド Web メソッド

ASP.NET グリッド

JQuery Ajax 関数

上記のコードは、json でデータを取得していることを確認するため、上記のアラートは response.d[0].RelationshipID に応答します。

このようにjsファイルで宣言されたリストがあります（完全なリストには6つのアイテムが含まれていますが、それよりも多くても少なくてもかまいません）

html ファイルで宣言された 2 つのテンプレート

リストからデータを表示する必要がある2つのコントロール

フリップボックスに画像ギャラリーを表示し、その横のリストビューに各画像に関連付けられたテキストの説明を表示しようとしています。設計上、両方を同じテンプレートに入れることはできません。

私のフリップボックスは正常に動作し、すべての画像を表示しますが、リストビューは機能しません。最初に、リストから 3 つの説明のみが表示されます。それらの 3 つの説明は、ユーザーがフリップボックスで画像を変更すると変更される代わりに、スクロール バーを使用してコントロールに表示されます。

誰かがこれを解決するのを手伝ってくれますか?

Polymer iron-ajax 呼び出しと、バインディングが発生する前に応答を変更/フィルタリングする方法は?

コード的には次のようなものです：

そのため、{{carts.value}} をカスタム要素<cart-list>に渡すまでに、応答からいくつかのアイテムをフィルター処理する必要があります。基本的に、カートはあまりにも多くのデータを返すため、そのデータのいくつかをフィルター処理してから取得したいと考えています。にカートバインディングを渡し<cart-list>ます。

どんな助けでも感謝します。前もって感謝します。

テンプレートに次の行があります。

これを実行すると、次のエラーが表示されます。

array.findこれは、バインディング内から使用できないことを意味しますか?

オブジェクトに値があり、ウォッチ ウィンドウで式が評価されることはわかっています。助言がありますか？

編集:この質問とその回答は問題を回避しますが、重複しているとは思いません。その質問は、小さなリスト、おそらく 1 つのレコードへのフィルタリングに固有のものです。ここで、私の問題は毎回 1 つのレコードを取得することです。@ Thierry-Templier の回答はこの点で見栄えがよく、HTML がいかにきれいになるかが気に入っています。

1.<%: > and 2.<%= > and 3.<%# > and 4.<%$ > and 5.<%! >.

angularjs の相互依存可能なドロップダウンがあります。ここにデモがありplunkerます: http://plnkr.co/edit/mIFCKKO5Azr4ljyoge5r?p=preview。最初の（国）ドロップダウンからオプションを選択すると、2番目の（州）ドロップダウンが通常のドロップダウン（上記のプランカーのように）ではなくチェックボックスドロップダウンとして表示され、2番目の複数のドロップダウンからオプションを選択した後、別の複数のドロップダウンを再度取得します。サンプルのチェックボックス ドロップダウンを次に示しfiddleます。

最後に、最初の通常のドロップダウンから国を選択すると、州を選択するためのチェックボックス付きの 2 番目の複数のドロップダウン メニューが有効になり、州を選択した後、都市を選択するための別のチェックボックス ドロップダウン メニューが有効になる必要があります。最初のドロップダウンからオプションを選択するまで、2 番目と 3 番目のドロップダウンを無効にする必要があり、2 番目のドロップダウンからオプションを選択するまで、3 番目のドロップダウンを無効にする必要があります。

誰かが私を助けてくれることを願っています。前もって感謝します！！