JavaScriptでDOMデータバインディングを実装する方法
この質問を厳密に教育的なものとして扱ってください。 私はまだこれを実行するための新しい答えやアイデアを聞くことに興味があります
tl; dr
JavaScriptを使って双方向のデータバインディングを実装する方法
DOMへのデータバインディング
DOMへのデータバインディングとは、たとえば、JavaScriptオブジェクトaとプロパティbを持つことです。それから、<input> DOM要素があると（例えば）、DOM要素が変わるとaが変わり、その逆も同様です（つまり、双方向のデータバインディングを意味します）。
これがAngularJSの図で、これがどのようなものかを示しています。
だから基本的に私はJavaScriptが似ている：
var a = {b:3};
それから次のような入力（または他のフォーム）要素
<input type='text' value=''>
入力値をa.bの値にしたいのですが（例えば）、入力テキストが変わったら、a.bも変更したいのです。 JavaScriptでa.bが変わると、入力も変わります。
質問
単純なJavaScriptでこれを実現するための基本的なテクニックは何ですか？
具体的には、私は参照するために良い答えが欲しいのですが：
- バインディングはオブジェクトに対してどのように機能しますか？
- フォームの変化を聞くことはどのように機能するのでしょうか。
- 簡単な方法で、HTMLをテンプレートレベルでのみ修正することは可能ですか？ HTMLドキュメント自体のバインディングを追跡するのではなく、JavaScript（DOMイベント、および使用されるDOM要素への参照を保持するJavaScript）だけで追跡したいと思います。
私は何を試しましたか？
私はMoustacheの大ファンなので、テンプレート作成に使ってみました。しかし、MoustacheはHTMLを文字列として処理するので、データバインディング自体を実行しようとしたときに問題に遭遇しました。私が考えることができる唯一の回避策は、属性でHTML文字列（または作成されたDOMツリー）自体を修正することでした。別のテンプレートエンジンを使用しても構いません。
基本的に、私は手元の問題を複雑にしていたという強い感じを得ました、そして、簡単な解決策があります。
注：外部ライブラリ、特に数千行のコードを使用した答えを提供しないでください。私はAngularJSとKnockoutJSを使っています。私は本当に 'use framework x'という形の答えは欲しくありません。最適には、双方向のデータバインディングを自分で実装する方法を理解するために多くのフレームワークを使用する方法を知らない将来の読者が欲しいのです。私は完全な答えを期待していませんが、そのアイデアを理解するためのものです。
- バインディングはオブジェクトに対してどのように機能しますか？
- フォームの変化を聞くことはどのように機能するのでしょうか。
両方のオブジェクトを更新する抽象化
他にも手法があると思いますが、最終的には、関連するDOM要素への参照を保持し、それ自体のデータとその関連要素への更新を調整するインターフェースを提供するオブジェクトがあればよいのです。
.addEventListener()はこれのためのとてもいいインターフェースを提供します。 eventListenerインターフェースを実装するオブジェクトを指定すると、そのオブジェクトをthis値として使用してそのハンドラを起動します。
これにより、要素とその関連データの両方に自動的にアクセスできます。
あなたのオブジェクトを定義する
プロトタイプ継承はこれを実装するための素晴らしい方法ですが、もちろん必須ではありません。まずあなたの要素と初期データを受け取るコンストラクタを作成します。
function MyCtor(element, data) {
this.data = data;
this.element = element;
element.value = data;
element.addEventListener("change", this, false);
}
そのため、ここでコンストラクタは新しいオブジェクトのプロパティに関する要素とデータを格納します。また、changeイベントを指定のelementにバインドします。興味深いのは、2番目の引数として関数の代わりに新しいオブジェクトを渡すことです。 しかし、これだけではうまくいきません。
eventListenerインターフェースの実装
これを機能させるには、あなたのオブジェクトはeventListenerインターフェースを実装する必要があります。これを実現するために必要なのは、オブジェクトにhandleEvent()メソッドを渡すことだけです。
それが継承が起こるところです。
MyCtor.prototype.handleEvent = function(event) {
switch (event.type) {
case "change": this.change(this.element.value);
}
};
MyCtor.prototype.change = function(value) {
this.data = value;
this.element.value = value;
};
これを構造化するにはさまざまな方法がありますが、更新を調整する例として、change()メソッドに値のみを受け入れさせ、イベントオブジェクトの代わりにhandleEventにその値を渡すようにしました。こうすることで、change()をイベントなしで呼び出すことができます。
そのため、changeイベントが発生すると、要素と.dataプロパティの両方が更新されます。 JavaScriptプログラムで.change()を呼び出しても同じことが起こります。
コードを使う
これで、新しいオブジェクトを作成し、それに更新を実行させることができます。 JSコードの更新は入力に表示され、入力の変更イベントはJSコードに表示されます。
var obj = new MyCtor(document.getElementById("foo"), "20");
// simulate some JS based changes.
var i = 0;
setInterval(function() {
obj.change(parseInt(obj.element.value) + ++i);
}, 3000);
そこで、私は自分の解決策をポットに入れることにしました。これが 作業中の手間 です。これはごく最近のブラウザでしか動かないことに注意してください。
それが使うもの
この実装は非常に近代的です - それは（非常に）近代的なブラウザとユーザーに2つの新しい技術を必要とします：
MutationObservers DOMの変更を検出します（イベントリスナーも使用されます）Object.observeオブジェクトの変更を検出してDOMに通知します。 危険、この答えはECMAScript技術委員会によって議論され決定されたO.oと書かれているので、ポリフィルを検討してください。
使い方
- 要素に
domAttribute:objAttributeマッピングを置きます - 例えばbind='textContent:name' - DataBind関数でそれを読んでください。要素とオブジェクトの両方に対する変更を観察します。
- 変更があった場合 - 関連する要素を更新してください。
ソリューション
これはdataBind関数です。これは20行のコードで、短くすることもできます。
function dataBind(domElement, obj) {
var bind = domElement.getAttribute("bind").split(":");
var domAttr = bind[0].trim(); // the attribute on the DOM element
var itemAttr = bind[1].trim(); // the attribute the object
// when the object changes - update the DOM
Object.observe(obj, function (change) {
domElement[domAttr] = obj[itemAttr];
});
// when the dom changes - update the object
new MutationObserver(updateObj).observe(domElement, {
attributes: true,
childList: true,
characterData: true
});
domElement.addEventListener("keyup", updateObj);
domElement.addEventListener("click",updateObj);
function updateObj(){
obj[itemAttr] = domElement[domAttr];
}
// start the cycle by taking the attribute from the object and updating it.
domElement[domAttr] = obj[itemAttr];
}
ここにいくつかの用法があります：
HTML：
<div id='projection' bind='textContent:name'></div>
<input type='text' id='textView' bind='value:name' />
JavaScript：
var obj = {
name: "Benjamin"
};
var el = document.getElementById("textView");
dataBind(el, obj);
var field = document.getElementById("projection");
dataBind(field,obj);
これが 作業中の手間 です。この解決策はかなり一般的なものです。 Object.observeと変異オブザーバのシミングが可能です。
私は私の前払い人に追加したいのですが。私はあなたが単にメソッドを使わずにあなたのオブジェクトに新しい値を割り当てることを可能にする少し異なるアプローチを提案します。ただし、これは特に古いブラウザではサポートされていないため、IE 9では引き続き別のインターフェイスを使用する必要があります。
最も注目すべきは、私のアプローチはイベントを利用していないということです。
ゲッターとセッター
私の提案は ゲッターとセッター の比較的若い機能、特にセッターのみを利用しています。一般的に言えば、ミューテーターを使うと、特定のプロパティに値を割り当てて取得する方法の動作を「カスタマイズ」できます。
ここで使用する実装の1つは Object.defineProperty メソッドです。それはFireFox、GoogleChromeそして - 私が思うに - IE9で動作します。他のブラウザはテストしていませんが、これは理論上の問題なので...
とにかく、それは3つのパラメータを受け取ります。最初のパラメータは新しいプロパティを定義するオブジェクト、2番目のパラメータは新しいプロパティの名前に似た文字列、最後のパラメータは新しいプロパティの動作に関する情報を提供する「記述子オブジェクト」です。
特に興味深い2つの記述子はgetとsetです。例は次のようになります。これら2つを使用すると、他の4つの記述子を使用できなくなります。
function MyCtor( bindTo ) {
// I'll omit parameter validation here.
Object.defineProperty(this, 'value', {
enumerable: true,
get : function ( ) {
return bindTo.value;
},
set : function ( val ) {
bindTo.value = val;
}
});
}
今これを利用することはわずかに異なります：
var obj = new MyCtor(document.getElementById('foo')),
i = 0;
setInterval(function() {
obj.value += ++i;
}, 3000);
これは最近のブラウザでしか機能しないことを強調したいです。
私の答えはもっと技術的になると思いますが、他の人が同じテクニックを使って同じものを提示しているから違いはありません。
まず最初に、この問題の解決策は "observer"と呼ばれるデザインパターンを使用することです。プレゼンテーションからデータを切り離して、1つの変更をリスナーにブロードキャストすることにしましょう。しかし、この場合は双方向です。
DOMからJSへの道
DOMからjsオブジェクトにデータをバインドするには、data属性（または互換性が必要な場合はクラス）の形式でマークアップを追加します。
<input type="text" data-object="a" data-property="b" id="b" class="bind" value=""/>
<input type="text" data-object="a" data-property="c" id="c" class="bind" value=""/>
<input type="text" data-object="d" data-property="e" id="e" class="bind" value=""/>
このようにして querySelectorAll を使ってjsを通してアクセスすることができます（あるいは互換性のために旧友 getElementsByClassName ）.
これで、オブジェクトごとに1人のリスナーまたはコンテナ/ドキュメントに1人の大きなリスナーのように、変更をリスニングするイベントをバインドできます。ドキュメント/コンテナにバインドすると、その中またはその子に加えられたすべての変更に対してイベントが発生します。メモリ使用量は少なくなりますが、イベント呼び出しが発生します。
コードは次のようになります。
//Bind to each element
var elements = document.querySelectorAll('input[data-property]');
function toJS(){
//Assuming `a` is in scope of the document
var obj = document[this.data.object];
obj[this.data.property] = this.value;
}
elements.forEach(function(el){
el.addEventListener('change', toJS, false);
}
//Bind to document
function toJS2(){
if (this.data && this.data.object) {
//Again, assuming `a` is in document's scope
var obj = document[this.data.object];
obj[this.data.property] = this.value;
}
}
document.addEventListener('change', toJS2, false);
JSのためにDOMのやり方
2つ必要なことがあります。witchDOM要素の参照を保持する1つのメタオブジェクトが各jsオブジェクト/属性にバインドされていることと、オブジェクトの変更をリスンする方法です。それは基本的に同じです。あなたのオブジェクトはメタデータを「持つことができない」ので、オブジェクトの変更を監視してDOMノードにバインドする方法が必要です。プロパティ名がメタデータオブジェクトのプロパティに対応すること。コードは次のようになります。
var a = {
b: 'foo',
c: 'bar'
},
d = {
e: 'baz'
},
metadata = {
b: 'b',
c: 'c',
e: 'e'
};
function toDOM(changes){
//changes is an array of objects changed and what happened
//for now i'd recommend a polyfill as this syntax is still a proposal
changes.forEach(function(change){
var element = document.getElementById(metadata[change.name]);
element.value = change.object[change.name];
});
}
//Side note: you can also use currying to fix the second argument of the function (the toDOM method)
Object.observe(a, toDOM);
Object.observe(d, toDOM);
私は助けになったことを願っています。
昨日、私は自分自身でデータをバインドする方法を書き始めました。
それと遊ぶのはとても面白いです。
私はそれが美しいと非常に便利だと思います。少なくとも私のFirefoxとchromeを使ったテストでは、Edgeも動作するはずです。他の人についてはわからないが、彼らがProxyをサポートしていれば、うまくいくと思います。
https://jsfiddle.net/2ozoovne/1/
<H1>Bind Context 1</H1>
<input id='a' data-bind='data.test' placeholder='Button Text' />
<input id='b' data-bind='data.test' placeholder='Button Text' />
<input type=button id='c' data-bind='data.test' />
<H1>Bind Context 2</H1>
<input id='d' data-bind='data.otherTest' placeholder='input bind' />
<input id='e' data-bind='data.otherTest' placeholder='input bind' />
<input id='f' data-bind='data.test' placeholder='button 2 text - same var name, other context' />
<input type=button id='g' data-bind='data.test' value='click here!' />
<H1>No bind data</H1>
<input id='h' placeholder='not bound' />
<input id='i' placeholder='not bound'/>
<input type=button id='j' />
これがコードです：
(function(){
if ( ! ( 'SmartBind' in window ) ) { // never run more than once
// This hack sets a "proxy" property for HTMLInputElement.value set property
var nativeHTMLInputElementValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
var newDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
newDescriptor.set=function( value ){
if ( 'settingDomBind' in this )
return;
var hasDataBind=this.hasAttribute('data-bind');
if ( hasDataBind ) {
this.settingDomBind=true;
var dataBind=this.getAttribute('data-bind');
if ( ! this.hasAttribute('data-bind-context-id') ) {
console.error("Impossible to recover data-bind-context-id attribute", this, dataBind );
} else {
var bindContextId=this.getAttribute('data-bind-context-id');
if ( bindContextId in SmartBind.contexts ) {
var bindContext=SmartBind.contexts[bindContextId];
var dataTarget=SmartBind.getDataTarget(bindContext, dataBind);
SmartBind.setDataValue( dataTarget, value);
} else {
console.error( "Invalid data-bind-context-id attribute", this, dataBind, bindContextId );
}
}
delete this.settingDomBind;
}
nativeHTMLInputElementValue.set.bind(this)( value );
}
Object.defineProperty(HTMLInputElement.prototype, 'value', newDescriptor);
var uid= function(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
}
// SmartBind Functions
window.SmartBind={};
SmartBind.BindContext=function(){
var _data={};
var ctx = {
"id" : uid() /* Data Bind Context Id */
, "_data": _data /* Real data object */
, "mapDom": {} /* DOM Mapped objects */
, "mapDataTarget": {} /* Data Mapped objects */
}
SmartBind.contexts[ctx.id]=ctx;
ctx.data=new Proxy( _data, SmartBind.getProxyHandler(ctx, "data")) /* Proxy object to _data */
return ctx;
}
SmartBind.getDataTarget=function(bindContext, bindPath){
var bindedObject=
{ bindContext: bindContext
, bindPath: bindPath
};
var dataObj=bindContext;
var dataObjLevels=bindPath.split('.');
for( var i=0; i<dataObjLevels.length; i++ ) {
if ( i == dataObjLevels.length-1 ) { // last level, set value
bindedObject={ target: dataObj
, item: dataObjLevels[i]
}
} else { // digg in
if ( ! ( dataObjLevels[i] in dataObj ) ) {
console.warn("Impossible to get data target object to map bind.", bindPath, bindContext);
break;
}
dataObj=dataObj[dataObjLevels[i]];
}
}
return bindedObject ;
}
SmartBind.contexts={};
SmartBind.add=function(bindContext, domObj){
if ( typeof domObj == "undefined" ){
console.error("No DOM Object argument given ", bindContext);
return;
}
if ( ! domObj.hasAttribute('data-bind') ) {
console.warn("Object has no data-bind attribute", domObj);
return;
}
domObj.setAttribute("data-bind-context-id", bindContext.id);
var bindPath=domObj.getAttribute('data-bind');
if ( bindPath in bindContext.mapDom ) {
bindContext.mapDom[bindPath][bindContext.mapDom[bindPath].length]=domObj;
} else {
bindContext.mapDom[bindPath]=[domObj];
}
var bindTarget=SmartBind.getDataTarget(bindContext, bindPath);
bindContext.mapDataTarget[bindPath]=bindTarget;
domObj.addEventListener('input', function(){ SmartBind.setDataValue(bindTarget,this.value); } );
domObj.addEventListener('change', function(){ SmartBind.setDataValue(bindTarget, this.value); } );
}
SmartBind.setDataValue=function(bindTarget,value){
if ( ! ( 'target' in bindTarget ) ) {
var lBindTarget=SmartBind.getDataTarget(bindTarget.bindContext, bindTarget.bindPath);
if ( 'target' in lBindTarget ) {
bindTarget.target=lBindTarget.target;
bindTarget.item=lBindTarget.item;
} else {
console.warn("Still can't recover the object to bind", bindTarget.bindPath );
}
}
if ( ( 'target' in bindTarget ) ) {
bindTarget.target[bindTarget.item]=value;
}
}
SmartBind.getDataValue=function(bindTarget){
if ( ! ( 'target' in bindTarget ) ) {
var lBindTarget=SmartBind.getDataTarget(bindTarget.bindContext, bindTarget.bindPath);
if ( 'target' in lBindTarget ) {
bindTarget.target=lBindTarget.target;
bindTarget.item=lBindTarget.item;
} else {
console.warn("Still can't recover the object to bind", bindTarget.bindPath );
}
}
if ( ( 'target' in bindTarget ) ) {
return bindTarget.target[bindTarget.item];
}
}
SmartBind.getProxyHandler=function(bindContext, bindPath){
return {
get: function(target, name){
if ( name == '__isProxy' )
return true;
// just get the value
// console.debug("proxy get", bindPath, name, target[name]);
return target[name];
}
,
set: function(target, name, value){
target[name]=value;
bindContext.mapDataTarget[bindPath+"."+name]=value;
SmartBind.processBindToDom(bindContext, bindPath+"."+name);
// console.debug("proxy set", bindPath, name, target[name], value );
// and set all related objects with this target.name
if ( value instanceof Object) {
if ( !( name in target) || ! ( target[name].__isProxy ) ){
target[name]=new Proxy(value, SmartBind.getProxyHandler(bindContext, bindPath+'.'+name));
}
// run all tree to set proxies when necessary
var objKeys=Object.keys(value);
// console.debug("...objkeys",objKeys);
for ( var i=0; i<objKeys.length; i++ ) {
bindContext.mapDataTarget[bindPath+"."+name+"."+objKeys[i]]=target[name][objKeys[i]];
if ( typeof value[objKeys[i]] == 'undefined' || value[objKeys[i]] == null || ! ( value[objKeys[i]] instanceof Object ) || value[objKeys[i]].__isProxy )
continue;
target[name][objKeys[i]]=new Proxy( value[objKeys[i]], SmartBind.getProxyHandler(bindContext, bindPath+'.'+name+"."+objKeys[i]));
}
// TODO it can be faster than run all items
var bindKeys=Object.keys(bindContext.mapDom);
for ( var i=0; i<bindKeys.length; i++ ) {
// console.log("test...", bindKeys[i], " for ", bindPath+"."+name);
if ( bindKeys[i].startsWith(bindPath+"."+name) ) {
// console.log("its ok, lets update dom...", bindKeys[i]);
SmartBind.processBindToDom( bindContext, bindKeys[i] );
}
}
}
return true;
}
};
}
SmartBind.processBindToDom=function(bindContext, bindPath) {
var domList=bindContext.mapDom[bindPath];
if ( typeof domList != 'undefined' ) {
try {
for ( var i=0; i < domList.length ; i++){
var dataTarget=SmartBind.getDataTarget(bindContext, bindPath);
if ( 'target' in dataTarget )
domList[i].value=dataTarget.target[dataTarget.item];
else
console.warn("Could not get data target", bindContext, bindPath);
}
} catch (e){
console.warn("bind fail", bindPath, bindContext, e);
}
}
}
}
})();
それから、設定するには、ちょうど：
var bindContext=SmartBind.BindContext();
SmartBind.add(bindContext, document.getElementById('a'));
SmartBind.add(bindContext, document.getElementById('b'));
SmartBind.add(bindContext, document.getElementById('c'));
var bindContext2=SmartBind.BindContext();
SmartBind.add(bindContext2, document.getElementById('d'));
SmartBind.add(bindContext2, document.getElementById('e'));
SmartBind.add(bindContext2, document.getElementById('f'));
SmartBind.add(bindContext2, document.getElementById('g'));
setTimeout( function() {
document.getElementById('b').value='Via Script works too!'
}, 2000);
document.getElementById('g').addEventListener('click',function(){
bindContext2.data.test='Set by js value'
})
今のところ、HTMLInputElement値バインドを追加しました。
改善方法を知っていれば教えてください。
このリンクには、双方向データバインディングの非常に単純な基本的な実装があります "JavaScriptによる簡単な双方向データバインディング"
Knockoutjs、backbone.js、およびagility.jsからのアイディアとともに、前のリンクから この軽量で高速のMVVMフレームワーク、ModelView.js につながりました。 jQueryに基づく これはjQueryとうまく連携していて、そのうち私は謙虚な（あるいはそれほど謙虚ではない）作家です。
下記のサンプルコードを再生する（ blog post link から）：
DataBinderのサンプルコード
function DataBinder( object_id ) {
// Use a jQuery object as simple PubSub
var pubSub = jQuery({});
// We expect a `data` element specifying the binding
// in the form: data-bind-<object_id>="<property_name>"
var data_attr = "bind-" + object_id,
message = object_id + ":change";
// Listen to change events on elements with the data-binding attribute and proxy
// them to the PubSub, so that the change is "broadcasted" to all connected objects
jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
var $input = jQuery( this );
pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
});
// PubSub propagates changes to all bound elements, setting value of
// input tags or HTML content of other tags
pubSub.on( message, function( evt, prop_name, new_val ) {
jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
var $bound = jQuery( this );
if ( $bound.is("input, textarea, select") ) {
$bound.val( new_val );
} else {
$bound.html( new_val );
}
});
});
return pubSub;
}
JavaScriptオブジェクトに関しては、この実験のためのUserモデルの最小限の実装は次のようになります。
function User( uid ) {
var binder = new DataBinder( uid ),
user = {
attributes: {},
// The attribute setter publish changes using the DataBinder PubSub
set: function( attr_name, val ) {
this.attributes[ attr_name ] = val;
binder.trigger( uid + ":change", [ attr_name, val, this ] );
},
get: function( attr_name ) {
return this.attributes[ attr_name ];
},
_binder: binder
};
// Subscribe to the PubSub
binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
if ( initiator !== user ) {
user.set( attr_name, new_val );
}
});
return user;
}
モデルのプロパティをUIの一部にバインドしたい場合は、対応するHTML要素に適切なデータ属性を設定するだけです。
// javascript
var user = new User( 123 );
user.set( "name", "Wolfgang" );
<!-- html -->
<input type="number" data-bind-123="name" />
HTML入力をバインドする
<input id="element-to-bind" type="text">
2つの機能を定義します。
function bindValue(objectToBind) {
var elemToBind = document.getElementById(objectToBind.id)
elemToBind.addEventListener("change", function() {
objectToBind.value = this.value;
})
}
function proxify(id) {
var handler = {
set: function(target, key, value, receiver) {
target[key] = value;
document.getElementById(target.id).value = value;
return Reflect.set(target, key, value);
},
}
return new Proxy({id: id}, handler);
}
関数を使う：
var myObject = proxify('element-to-bind')
bindValue(myObject);
これは、プロパティへのアクセス方法を直接変更するObject.definePropertyを使用したアイデアです。
コード：
function bind(base, el, varname) {
Object.defineProperty(base, varname, {
get: () => {
return el.value;
},
set: (value) => {
el.value = value;
}
})
}
使用法：
var p = new some_class();
bind(p,document.getElementById("someID"),'variable');
p.variable="yes"
フィドル： ここ
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="text" id="demo" name="">
<p id="view"></p>
<script type="text/javascript">
var id = document.getElementById('demo');
var view = document.getElementById('view');
id.addEventListener('input', function(evt){
view.innerHTML = this.value;
});
</script>
</body>
</html>
変数を入力にバインドする（双方向バインディング）簡単な方法は、getterとsetterのinput要素に直接アクセスすることです。
var variable = function(element){
return {
get : function () { return element.value;},
set : function (value) { element.value = value;}
}
};
HTMLの場合：
<input id="an-input" />
<input id="another-input" />
そして使用する：
var myVar = new variable(document.getElementById("an-input"));
myVar.set(10);
// and another example:
var myVar2 = new variable(document.getElementById("another-input"));
myVar.set(myVar2.get());
var variable = function(element){
return function () {
if(arguments.length > 0)
element.value = arguments[0];
else return element.value;
}
}
使用するには：
var v1 = new variable(document.getElementById("an-input"));
v1(10); // sets value to 20.
console.log(v1()); // reads value.
Onkeypressとonchangeのイベントハンドラを使って、私たちのjsとjsへのバインディングビューを作るための基本的なJavaScriptの例をいくつか見てきました。
ここでの例のプランカー http://plnkr.co/edit/7hSOIFRTvqLAvdZT4Bcc?p=preview
<!DOCTYPE html>
<html>
<body>
<p>Two way binding data.</p>
<p>Binding data from view to JS</p>
<input type="text" onkeypress="myFunction()" id="myinput">
<p id="myid"></p>
<p>Binding data from js to view</p>
<input type="text" id="myid2" onkeypress="myFunction1()" oninput="myFunction1()">
<p id="myid3" onkeypress="myFunction1()" id="myinput" oninput="myFunction1()"></p>
<script>
document.getElementById('myid2').value="myvalue from script";
document.getElementById('myid3').innerHTML="myvalue from script";
function myFunction() {
document.getElementById('myid').innerHTML=document.getElementById('myinput').value;
}
document.getElementById("myinput").onchange=function(){
myFunction();
}
document.getElementById("myinput").oninput=function(){
myFunction();
}
function myFunction1() {
document.getElementById('myid3').innerHTML=document.getElementById('myid2').value;
}
</script>
</body>
</html>
要素の値を変更すると、 DOMイベント が発生する可能性があります。イベントに応答するリスナーは、JavaScriptでデータバインディングを実装するために使用できます。
例えば：
function bindValues(id1, id2) {
const e1 = document.getElementById(id1);
const e2 = document.getElementById(id2);
e1.addEventListener('input', function(event) {
e2.value = event.target.value;
});
e2.addEventListener('input', function(event) {
e1.value = event.target.value;
});
}
Here は、DOM要素を互いにまたはJavaScriptオブジェクトとどのようにバインドできるかを示すコードとデモです。
それはバニラジャバスクリプトで非常に単純な双方向データバインディングです....
<input type="text" id="inp" onkeyup="document.getElementById('name').innerHTML=document.getElementById('inp').value;">
<div id="name">
</div>