Binding of the data model to the javascript view

I think many people use DataBinding in .NET, it’s also data binding. It allows, with the selected data model and independent visual presentation, to forget about data synchronization with the form. Tying the model properties to the view elements once, we get rid of dozens of onChange handlers and similar to change the model fields, and in the case of a field change outside the gui interface (for example, synchronizing the model with the base), we will not interfere with the abstraction levels to update the textBox. text. Let's take the data separately, gui separately. Plus we get visual, easily portable code on asp.net or even on another language / platform.



Synchronization can be both in two directions, and in one, and in any direction.
With the development of the level of web-oriented applications, it became possible to implement such a solution in JavaScript. Well, I think the benefits of separating data from presentation have already been considered in many places and more than once led to a holivar, so let’s miss this point. I will consider examples on jQuery. For example, with classic data storage in a DOM structure, saving a hundred checkboxes in some form (formBody) can be implemented in this way:

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

The “change” flag is used to optimize the sample, that is, we select only the changed elements. Each check mark contains idRef tags — the element id, the availability of which it reflects. Now, having selected all the elements, we iterate over them and transfer them to the hash array

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) });
}
);

On the native Javascript functionality, the code will be quite cumbersome, I will not bring it, but the essence does not change.
The disadvantages are obvious, the data is very smeared around the DOM, editing the logic of the model or the form of the representation can often lead to errors, because it's hard to remember everything, keep track of everything, especially if ready-made html comes from php, you have to edit two files, which can also lead to errors. Looking for some ready-made javascript data binding solution, I found that there are many solutions, for example, only among jQuery plug-ins, I found jPop , JQBinder , Databind plug-in , jBind , JSRepeater , Chain .
Consider in order.

jPop

Features:

• array support.
• one-way synchronization from view to model.
• you cannot select a tag field to which we would like to bind an object field, this is either
• The local model is used as the data source.
• no documentation

The principle of operation is quite simple, the name of the key ( key ) of the model is mapped to the id of the tag in the DOM structure and is filled with a value, here is a small example showing the functionality of the plugin:

<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

Features:

• no normal examples
• no description
• no documentation
• no sync

Example:

<div id= "#target" >
<img src= '$(.profile_image_url)' />
<div>$(.text)</div>
</div>

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

Poor functionality, even for a template engine and the lack of ability to work with a local model, reduces its usefulness to nothing.

Databind plug-in

Features:

• there is a map of the model binding to the representation
• no sync
• A local model is used as a data source and anchor map.
• no documentation, but there are many examples

The library is a template engine.
Example:

< 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

Features:

• A local model is used as a data source and anchor map.
• no sync

The library is a template engine.
Example:

< 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));

Jspepeater

Features:

• possibility of formatting data.
• support for arrays and trees.
• The local model is used as the data source.
• built-in variable support
• missing synchronization.

The library is a template engine.
Example of use:

<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>

Chain

Features:

• good documentation.
• the ability to synchronize with the model through events, plus the ability to manage the synchronization process.
• search data by model.
• possibility of formatting data.
• implement drag & drop views
• a lot of examples

Very powerful in terms of features builder html code on the template, with the ability to synchronize with the model. Describe its functionality does not work, this is a topic for a separate article, and maybe a book.
Example:

$( '<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);

Here are some examples of generating tables http://javascriptly.com/2008/08/a-better-javascript-template-engine/
Another example:

< 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}'
});

As a result, we have:

< 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 >

To summarize, if we just need a binding with synchronization, you should pay attention to jPop and modify it a bit. If the presentation is not limited to just input `s, but involves working with dynamic tablets, lists, trees, sorting, drag & drop, then you should seriously consider the possibilities of raid-ox libraries. jQuery + Chain + Interaction can greatly simplify the life of a JavaScript programmer for designing compact and easy-to-read web applications.
Happy programming!