Clever Geek Handbook

データモデルをJavaScriptビューにバインドする

多くの人が.NETでDataBindingを使用していると思います。これはデータバインディングです。 選択されたデータモデルと独立した視覚的表示により、フォームとのデータ同期を忘れることができます。 モデルのプロパティをプレゼンテーション要素に一度添付することで、モデルのフィールドを変更するための多数のonChangeハンドラーなどを取り除き、フィールドがGUIインターフェイスの外側で変更された場合（たとえば、モデルをデータベースと同期する）、textBoxを更新するための抽象化レベルに干渉しません。テキスト。 データを別々に、別々にGUIにします。 さらに、asp.netまたは別の言語/プラットフォームに視覚的で簡単に移植可能なコードを取得します。



データバインディング



同期は、2方向、1方向、および任意の方向の両方で可能です。

Webベースのアプリケーションのレベルの開発により、JavaScriptで同様のソリューションを実装することが可能になりました。 さて、データをプレゼンテーションから分離することの利点は、すでに多くの場所で議論されており、ホリバーに何度もつながっていると思うので、この点を見逃しましょう。 たとえば、DOM構造の従来のデータストレージでは、何百ものチェックマークを何らかの形式（formBody）で保存する方法を次のように実装できます。

$( 'table#formBody input[name="available"][change=true]' )





「change」フラグを使用して選択を最適化します、つまり、変更された要素のみを選択し、各チェックマークにはidRefタグ（可用性が反映される要素のID）が含まれます。今、すべての要素を選択し、それらを繰り返し、ハッシュ配列に転送します
var find = {skills: []};

$j( 'table#formBody input[name="available"][change=true]' ).each(

function (index, el){

find.skills.push({ id: $j(el).attr( 'idRef' ), val: ($j(el).attr( 'checked' ) ? 1 : 0) });

}

);







ネイティブのJavascript機能では、コードはかなり面倒です。説明はしませんが、本質は変わりません。

マイナスは明らかであり、データはDOM全体に非常に広がっているため、モデルロジックまたはプレゼンテーションフォームを編集するとエラーが発生することがよくあります 特に、完成したhtmlがphpから来ている場合は、2つのファイルを編集する必要があり、これもエラーにつながる可能性があります。 既製のJavaScriptデータバインディングソリューションを探して、たとえば、 jPop 、 JQBinder 、 Databind プラグイン 、 jBind 、 JSRepeater 、 Chainを見つけたjQueryプラグインの中でのみ、多くのソリューションがあることがわかりました。

順番に考えてみましょう。

jPop



機能：

操作の原理は非常に簡単です。モデルのキー名はDOM構造のタグIDにマップされ、値が入力されます。プラグインの機能を示す小さな例を次に示します。

<h1 id= "greeting" class = "jpop_class" ></h1>

<p id= "greetingProp.greeting" class = "jpop_class" ></p>

<p>And,

<span id= "greetingProp2:greetingArray" class = "jpop_class" >

<br><span id= "greetingArray.greeting" class = "jpop_class" ></span>

</span>

<script type= "text/javascript" >

$j( function () {

var jso= {

greeting: "Hello, World!" ,

greetingProp: {

greeting: "Hello again, World!"

},

greetingProp2: {

greetingArray: [

{ greeting: "Hello, Nick!" },

{ greeting: "Hello, Sri!" },

{ greeting: "Hello, Jody!" },

{ greeting: "Hello, Andrew!" },

{ greeting: "Hello, Heather!" },

{ greeting: "Hello, Ben!" }

]

}

};

$j( '.jpop_class' ).jpop(jso);

});











Jqbinder



機能：

例：

<div id= "#target" >

<img src= '$(.profile_image_url)' />

<div>$(.text)</div>

</div>



Then, simply call

$( "#stage" ).dataBindTo( { urlToJSONP, options } );





テンプレートエンジンでも機能が不十分であり、ローカルモデルを操作できないため、その有用性はゼロになります。

データバインドプラグイン



機能：

ライブラリはテンプレートエンジンです。

例：

< form action ="#" id ="form1" >

< label for ="txtName" > Name </ label >< input type ="text" id ="txtName" >< br >

< label for ="txtAge" > Age </ label >< input type ="text" id ="txtAge" >< br >

< label for ="drpGender" > Gender </ label >< select id ="drpGender" >< option value ="0" > Female </ option >< option value ="1" > Male </ option ></ select >

</ form >





var map = { name: '#txtName' , age: '#txtAge' , gender: '#drpGender' , genders: '#drpGender' };

var data = { name: 'Jane Doe' , age: 27, genders: [[0, 'Female' ], [1, 'Male' ]], gender: 0 };



$( '#form1' ).binddata(data, map); //Bind with a map





jBind



機能：

ライブラリはテンプレートエンジンです。

例：

< div id ='template2' style ="display:none;" >

< div class ="content" >

<!--data-->

< div class ="viewBlockLeft" id ='{id}' >

#{id} < br />

< b > {name} {family} </ b > , < br />

< i > {education} </ i > , < br />

</ div >

<!--data-->

< div class ="clear" ></ div >

</ div >

</ div >





var template = $( '#template2' ).html();

var data = [

{

id:41,

name: 'Scott' ,

family: 'Adams' ,

education: 'Economics'

},

{

id:59,

name: 'Jack' ,

family: 'Welch' ,

education: 'Chemical Engineering'

}

];

alert($(template).bindTo(data));





JSRepeater



機能：

ライブラリはテンプレートエンジンです。

使用例：

<script>

var myData = { "Name" : "Google" , "Type" : "Search Engine" , "URL" : "www.google.com" };

$( '#template1' ).fillTemplate(myData);

</script>

<body>

<div id= 'template1' >${Name} is a ${Type} found at <a href= '${URL}' >${URL}</a></div>

</body>





チェーン



機能：

テンプレートによる非常に強力なビルダーHTMLコード。モデルと同期する機能を備えています。 機能を説明することはできません。これは別の記事のトピックであり、おそらく本です。

例：

$( '<div><div class="name"><span class="first">First</span> <span class="last">Last</span></div></div>' )

.item({first: 'Steve' , last: 'Jobs' })

.chain({

'.name .first' : {

style: 'color: blue;' ,

content: 'First Name: {first}'

},

'.name .last' : 'Family Name: {last}'

})

.appendTo( document .body);







以下にテーブル生成の例を示しますhttp://javascriptly.com/2008/08/a-better-javascript-template-engine/

別の例：

< div id ="contact" >

< div class ="name" > My Name </ div >

< div class ="address" > My Address </ div >

< div class ="country" > Unknown Country </ div >

</ div >





$( '#contact' ).item({

name: "Rizqi Ahmad" ,

address: "Somestrasse 50, Hamburg" ,

country: "Germany"

}).chain({

'.name' : 'Hello, My Name is {name}' ,

'.address' : 'My address is {address}' ,

'.country' : 'It is in {country}'

});





その結果、次のことができます。
< div id ="contact" >

< div class ="name" > Hello, My Name is Rizqi Ahmad </ div >

< div class ="address" > My address is Somestrasse 50, Hamburg </ div >

< div class ="country" > It is in Germany </ div >

</ div >





要約すると、同期バインディングだけが必要な場合は、jPopに注意を払い、少し変更する必要があります。 プレゼンテーションが単なる入力に限らず、動的なタブレット、リスト、ツリー、並べ替えオプション、ドラッグアンドドロップの操作を伴う場合、raid-oxのライブラリの機能を真剣に検討する価値があります。 jQuery + Chain + Interactionは、コンパクトで読みやすいWebアプリケーションを設計するためのJavaScriptプログラマーの生活を大幅に簡素化します。

素敵なプログラミングをしてください！


More articles:


All Articles