序文双方向データ バインディングとは、オブジェクトのプロパティが変更されると、対応する UI も同時に変更できること、およびその逆であることを意味します。つまり、name プロパティを持つユーザー オブジェクトがある場合、user.name に新しい値を設定するたびに、UI にも新しい値が表示されます。同様に、UI にデータ ユーザーの名前の入力ボックスが含まれている場合、新しい値を入力すると、ユーザー オブジェクトの名前プロパティがそれに応じて更新されます。 Ember.js、Angular.js、KnockoutJS などの多くの一般的な JavaScript フレームワークは、双方向データ バインディングを主要な機能の 1 つとして推進しています。これは、ゼロから実装するのが難しいという意味ではなく、この種の機能が必要な場合にこれらのフレームワークを使用するのが唯一の選択肢であるという意味でもありません。基本的な考え方は実は非常に基本的なものであり、それを実装するには次の 3 つのポイントに要約できます。
パブリッシュ・サブスクライバ・パターンパブリッシュ/サブスクライブ モデルは、実際にはオブジェクト間の 1 対多の依存関係です。オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトに状態の変化が通知されます。 サブスクライバーは、サブスクライブしたいイベントをディスパッチセンター(イベントチャネル)に登録(Subscribe)します。パブリッシャー(Publisher)がディスパッチセンターにイベントを発行(Publish Event)すると、つまりイベントがトリガーされると、ディスパッチセンターはサブスクライバーが登録した処理コードをディスパッチセンターに一律にディスパッチ(Fire Event)します。 結果電話HTML 呼び出し終了バインディング data-bind-phone="name" <ul> <li class="block-phone fix bd-bottom"> <label for="J_verificationPhone" data-bind-phone="tishi"><span>電話番号</span></label> <input class="fix1" id="J_verificationPhone" data-bind-phone="name" name="phone" type="text" /> <button class="right J_clickTime" type="button"> <span class="award-messages-btn2 J_messagesBtn1">認証コードを取得</span> <span class="award-messages-btn2 J_messagesBtn2 none"><i>60 秒後に再送信</i></span> </ボタン> </li> <li class="ブロック検証修正"> <label for="J_verificationCode"><span>検証コード</span></label> <input class="fix1" data-bind-code="tishi" id="J_verificationCode" data-bind-phone="name" name="verification-code" class="" type="" /> </li> </ul> js呼び出し次のコードコメントを参照してください /** * 関数検証コールバックコールバックメソッド* [$btn1 説明] * データバインド電話="名前" * @message {[type]} 変更されたフィールド電話番号 * @prop_name {[type]} フィールドの値名 * @target {[type]} ターゲット jsdom オブジェクト。 * @targetValue {[type]} ターゲットjsdomオブジェクトの値 */// コールバック関数をリッスンすると、関数は targetvalue、ターゲット js dom オブジェクトの値を取得し、変更されたフィールドを操作するのに便利です。 ! ! var User = require('../../entry/module/twoWayAudio.js'); var phone = 新しいユーザー('phone',verificationCallback); 関数検証コールバック(メッセージ、プロパティ名、ターゲット、ターゲット値){ } インポートされたソースコード twoWayAudio 関数 DataBinder(object_id,verificationCallback){ // 単純な pubSub オブジェクトを作成する var pubSub = { コールバック: {}, on: 関数(メッセージ、コールバック) { this.callbacks[msg] = this.callbacks[msg] || []; this.callbacks[msg].push(コールバック); }, 公開: 関数(メッセージ) { \ this.callbacks[msg] = this.callbacks[msg] || []; (var i = 0, len = this.callbacks[msg].length; i < len; i++) { this.callbacks[msg][i].apply(this,arguments); }; } }, data_attr = "data-bind-" + object_id、 メッセージ = object_id + ":change", changeHandler = 関数(イベント) { var target = event.target || event.srcElement, // IE8 互換 prop_name = target.getAttribute(data_attr); if (prop_name && prop_name !== "") { if (検証コールバック) { var targetValue = target.value; 検証コールバック (メッセージ、prop_name、ターゲット、ターゲット値); } pubSub.publish(メッセージ、prop_name、target.value); } }; // イベントの変更をリッスンし、pubSub にプロキシします ドキュメントにイベントリスナーを追加する場合 document.addEventListener("keyup",changeHandler,false); } それ以外{ // IE8 は addEventListener の代わりに attachmentEvent を使用します document.attachEvent("onkeyup",changeHandler); }; // pubSub はバインドされたすべての要素に変更を伝播します pubSub.on(message,function(event,prop_name,new_val){ var elements = document.querySelectorAll("[" + data_attr + "=" +prop_name + "]"), タグ名; (var i = 0, len = elements.length; i < len; i++) { タグ名 = elements[i].tagName.toLowerCase(); if (tag_name === "input" || tag_name === "textarea" || tag_name === "select") { 要素[i].値 = new_val; } それ以外{ 要素[i].innerHTML = new_val; }; }; }) pubSub を返します。 } 関数 User(uid,verificationCallback) { var バインダー = 新しい DataBinder(uid,verificationCallback)、 ユーザー = { 属性 : {}、 // 属性セッターはデータバインダーpubSubを使用してセットを公開します: function (attr_name, val) { this.attribute[attr_name] = val; バインダーを公開します(uid + ":change",attr_name,val,this); }, 取得:関数(属性名){ this.attribute[attr_name]を返します。 }, _binder : バインダー }; バインダー.on(uid + ":change",関数(イベント,attr_name,new_val,イニシエーター) { if (イニシエーター !== ユーザー) { user.set(attr_name,new_val); } }); ユーザーを返します。 } module.exports = ユーザー; // phone.set( "name", "lwl" ); // phone.set( "tishi", "ヒント" ); 代替ソリューション 上記は双方向データバインディングの単なるカバーです。実際、この要件はもっと簡単に実装できます。 $('.block-phone #phone')[0].oninput=function(){ コンソールログ($(これ)) } 要約するこれで、js プロジェクトでの双方向データバインディングの簡単な実装方法についての記事は終了です。より関連性の高い js 双方向データバインディング実装コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL Strict Modeの知識ポイントの詳細な説明
>>: 史上最も便利な Zookeeper サーバーの構築方法 (推奨)
(P4) Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイ...
Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...
目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...
1. サブクエリMySQL 4.1以降はサブクエリをサポートしていますサブクエリ:別のクエリ内にネス...
通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...
日常のメンテナンスでは、スレッドがブロックされることが多く、データベースの応答が非常に遅くなります。...
目次1. 基本1.参照2. 参照3. 参照4. 最適な使い方2. 詳細な1. なぜrefが必要なのか...
結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...
序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...
エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...
導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。サーバーは検証コー...
目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...
について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...
EXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情報を提供します...
目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...