序文双方向データ バインディングとは、オブジェクトのプロパティが変更されると、対応する 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 サーバーの構築方法 (推奨)
目次結合構文: 1. InnerJOIN: (内部結合) 2. LeftJOIN: (左結合) 3....
mysqlはデータディレクトリ内のファイルをコピーしてデータを復元します背景: MySQL がクラッ...
前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...
プログラムは上から下へ順番に実行され、いくつかの制御文によって実行経路を変更することができます。制御...
1. 永続的な統計情報の重要性:統計は、MySQL が実行プランを生成するためのガイドとして使用され...
目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...
目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....
1. ファイアウォールの状態を確認するファイアウォールのステータスを確認する systemctl s...
この記事では、ネイティブ JS によって実装された動的読み込みプログレス バーの特殊効果を紹介します...
目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....
序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...
//MySQL ステートメント SELECT * FROM `MyTable` WHERE `id...
背景下のようなリストでは、削除ボタンをクリックすると削除操作を実行する必要があります。 リスト生成:...
まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...