データバインディングを追加するための提案

みなさんこんにちは!



私はMicrosoft ASP.NETチームの開発者です。 私たちのチームは、jQueryでのデータリンクをサポートするための提案を提出しました。ご意見をお聞かせください。



以下では、一般的な用語でバインディングについて説明します。詳細な説明は、特別なウィキページで見つけることができます。



http://github.com/nje/jquery-datalink/wikis/jquery-data-linking-proposal



データバインディングプロトタイプを作成し、githubで公開しました。



http://github.com/nje/jquery-datalink



リポジトリにはdemo-contacts.htmlが含まれています。これは、実際のデータバインディングの使用を示し、以前に提案されたjQueryテンプレートライブラリ(jQueryテンプレートライブラリ)も使用します。 wikiおよびこの記事で公開されている例はAPIの操作方法を示しているだけで、デモのようにプラグインの有用性全体を伝えていないため、デモを試してみることをお勧めします。



この記事で使用されている「データリンク」という用語は、「あるオブジェクトのフィールドを別のオブジェクトのフィールドに自動的にリンクする」ことを意味します。 つまり、2つのオブジェクトが接続されている場合、オブジェクトの1つの値(ソース)が変更されると、他のオブジェクト(ターゲット)の値が自動的に変更されます。 リンクは、単純なオブジェクト、配列、DOM要素、ブラウザプラグインなどの2つのオブジェクト間で発生する可能性があります。







この単純な例では、入力要素をオブジェクトフィールドに関連付けます。



image



突然変異イベント

ソースをターゲットにリンクする場合、ソースに関連付けられたデータが変更されたときに通知を受信する必要が生じるため、ターゲットに送信できます。 特にこの目的のために、プラグインはいくつかの特別なイベントをjQueryに追加します。これらは単独で使用できます。



attrChange

'attrChange'イベントは、DOM要素の属性またはオブジェクトがjQuery.fn.attrまたはjQuery.attrメソッドによって変更されたときに発生します。 このプラグインの興味深い機能は、単純なオブジェクトと配列にjQuery.fn.attrを使用できることです。 data()、bind()、trigger()メソッドも単純なオブジェクトで動作するため、これは自然な拡張であり、jQueryですでに広く適用されています。



ただし、ターゲットが単純なオブジェクトである特殊なケースを回避するために、jQuery.attrを少し変更する必要があります。 たとえば、クラスの名前をclassNameに、読み取り専用を読み取り専用に変更し、負の幅が無視される場合の動作を変更します。 その後、予想どおり、オブジェクトのフィールドを設定するためにattr()を使用する公式の機会が生じます。



image



attrChangeイベントは、val()およびdata()メソッドを介して行われた変更をキャプチャするためにも使用できます。 変更がイベントによってどのように表されるかについて、特別な合意が提案されることに注意してください。 同じイベントを呼び出すさまざまなデータ変更メソッドの組み合わせにより、イベントの処理が容易になり、個別のイベント「dataChange」と「valChange」が不要になります。attr()が変更およびサポートされる主な方法として考えられたら便利ですこのような構成、たとえば、$(..)。attr( "data:foo"、 "bar")または$(..)。attr( "val"、 "123")。これまでのところ、これは実装されておらず、公開されています。議論。



image



attrChanging

プラグインは、変更前にイベントを発生させ、ハンドラーが操作をキャンセルできるようにします。 これは、バインディングをサポートするために必要な機能ではありませんが、ここで説明する簡単な追加機能です。 'attrChanging'イベントは、DOM要素またはオブジェクトの属性を変更する必要があるときに発生します。 ev.preventDefault()メソッドを呼び出して、変更を防ぐことができます。



image



arrayChange

attrChangeイベントのように見えますが、新しい変更APIのいずれかを介して配列が変更されると発生します。 どのような変更が発生したかについての情報は、イベントオブジェクトを通じて入手できます。



image



次の配列変更イベントは、jQueryオブジェクトの静的メソッドとして使用できます: push、pop、splice、shift、unshift、reverse、sort 。 それぞれの引数は、配列が最初の引数であることを除いて、同じ方法で設定されます。



attrChangeと同様に、arrayChangeイベントは操作によるフィルタリングをサポートします。



image



arrayChanging

attrChangingイベントと同じ、配列のみ。 操作はev.preventDefault()メソッドを使用してキャンセルできます。



オブジェクトのリンク

オブジェクトが接続されると、一方の変更が他方に自動的に送信されます。 たとえば、これにより、フォームフィールドを非常にすばやく簡単にオブジェクトに関連付けることができます。 フォームフィールドの変更はすべて自動的にオブジェクトに送信されるため、コードを書く手間が省けます。 さらに、ビルトインコンバーターのサポートにより、オブジェクト間で値の形式またはタイプをオンザフライで変更できます(たとえば、電話番号の形式設定や文字列の数値への解析など)。



jQuery.fn.linkTo

ソースオブジェクトへの変更を単一のターゲットオブジェクトに転送する関係を確立します。



image



また、多くのパラメーターの代わりにオブジェクト設定での転送もサポートしています。



image



jQuery.fn.linkFrom

1つのソースから各ターゲットに変更をプルする関係を確立します。



image



jQuery.fn.linkBoth

2つのオブジェクトを互いにリンクすることにより、二重結合を確立します。 オブジェクトの変更は別のオブジェクトに送信されます。 同等の機能は、すぐにlinkToとlinkFromを呼び出すことです。



image



jQuery.convertFn

多くの場合、接続の一方の側から他方の側へ、オンザフライで値を変更する必要があります。 例:nullを「None」に変換する、文字列を数値にフォーマットまたは解析する。 バインディングAPIは、jQuery.convertFnの定義とそれ自体の両方で、変換関数の指定をサポートしています。



このプラグインには、「!」と呼ばれる既製のコンバーターが1つ付属しています。これは、コンバーター実装の例です。



image



コンバーター関数は、最初のパラメーターの値を取ります。 また、バインディングAPIを使用するときに渡されるパラメーターに一致するオブジェクトの設定も受け入れます。 これにより、コンバーターを簡単にパラメーター化できます。



image



フィードバックをお待ちしています!



-デイブリード



All Articles