Suggestion for adding data binding
Hello to all!
I am a developer from the Microsoft ASP.NET team. Our team makes a proposal to support data binding (data linking) in jQuery and we would like to hear your feedback.
Below, I will tell you about binding in general terms, a more detailed explanation can be found on a special wiki page:
')
http://github.com/nje/jquery-datalink/wikis/jquery-data-linking-proposal
We created a prototype of data binding and published it on github:
http://github.com/nje/jquery-datalink
The repository includes demo-contacts.html , which shows the use of data binding in practice and which also uses the jQuery template library (jQuery templating library) previously proposed by us. I suggest you try the demonstration, as the examples published in the wiki and in this article only show how to work with the API and do not convey the full usefulness of the plugin as the demonstration does.
The term “data linking” used in the article means: “automatically linking the field of one object to the field of another object”. This means that when two objects are connected, when the value of one of the objects (source) changes, the value of the other object (target) automatically changes. Linking can occur between any two objects, such as simple objects (plain objects), arrays, DOM elements, or browser plugins.
Example
In this simple example, you associate an input element with an object field:
Mutation Events
In the case of linking a source with a target, it becomes necessary to receive notifications when the data associated with the source has changed and, therefore, can be sent to the target object. Especially for this purpose, our plugin adds a few special events in jQuery, which can be used by themselves.
attrChange
The 'attrChange' event occurs when the attribute of a DOM element or object is changed by jQuery.fn.attr or jQuery.attr methods. An interesting feature of this plugin is that it allows jQuery.fn.attr to be used for simple objects and arrays. The data (), bind (), and trigger () methods also work with simple objects, so this is a natural extension that is already widely applicable in jQuery.
However, a small change in jQuery.attr is necessary in order to avoid special cases where the target is a simple object. For example, rename a class to className, readonly to readOnly, change the behavior when negative width values ​​are ignored and other cases. After that, there is an official possibility to use attr () to set fields for objects, as you might expect.
The attrChange event can also be used to capture changes made through the val () and data () methods. Please note that a special agreement is proposed on how the change is presented as an event. Combining different data-changing methods that call the same event makes it easier to handle the event and prevents the need for separate dataChange and valChange events. It would be good, in fact, if attr () was thought of as the primary method for changing and maintaining for example, $ (..). attr (“data: foo”, “bar”) or $ (..). attr (“val”, “123”). So far, this has not been implemented and is open to discussion.
attrChanging
The plugin also raises the event before the change, giving the handler the opportunity to cancel the operation. This is not a required feature to support binding, but a simple addition included here for discussion. The 'attrChanging' event occurs when an attribute of a DOM element or object needs to be changed. The ev.preventDefault () method can be called to prevent changes.
arrayChange
It looks like an attrChange event, but it occurs when an array is modified through any of the new modifying APIs. Information about what change occurred is available through the event object.
The following array change events are available as static methods for the jQuery object: push, pop, splice, shift, unshift, reverse, sort . Arguments for each of them are set the same way, except that the first argument is an array.
Like 'attrChange', the 'arrayChange' event supports filtering by operation.
arrayChanging
The same as the attrChanging event, only for arrays. The operation can be canceled through the ev.preventDefault () method.
Linking Objects
When objects are connected, changes in one are automatically sent to another. For example, this allows you to very quickly and simply associate form fields with an object. Any changes to the form fields will be automatically sent to the object, saving you from writing code. Moreover, the built-in support for converters allows you to change the format or type of value on the fly between objects (for example, formatting a phone number or parsing a string into a number).
jQuery.fn.linkTo
Establishes a relationship that directs changes to any source object to a single target object.
Also supported by the transfer in the settings of the object instead of many parameters.
jQuery.fn.linkFrom
Establishes a relationship that pulls changes from one source object for each target object.
jQuery.fn.linkBoth
Establishes a double bond by connecting two objects with each other. Changing any object is sent to another object. The equivalent is to call linkTo and linkFrom right away.
jQuery.convertFn
Often there is a need to modify values ​​on the fly on the one hand due to the other. For example: converting null to “None”, formatting or parsing a string into a number. The binding API supports the specification of the conversion function, both through the definition in jQuery.convertFn, and by itself.
The plugin comes with one ready-made converter named “!”, Which is an example of the converter implementation.
The functions of the converter take the value in the first parameter. They also accept the settings of an object that matches the parameters passed when using the binding API. This allows you to easily parameterize the converter.
We look forward to your feedback!
- Dave Reed
I am a developer from the Microsoft ASP.NET team. Our team makes a proposal to support data binding (data linking) in jQuery and we would like to hear your feedback.
Below, I will tell you about binding in general terms, a more detailed explanation can be found on a special wiki page:
')
http://github.com/nje/jquery-datalink/wikis/jquery-data-linking-proposal
We created a prototype of data binding and published it on github:
http://github.com/nje/jquery-datalink
The repository includes demo-contacts.html , which shows the use of data binding in practice and which also uses the jQuery template library (jQuery templating library) previously proposed by us. I suggest you try the demonstration, as the examples published in the wiki and in this article only show how to work with the API and do not convey the full usefulness of the plugin as the demonstration does.
The term “data linking” used in the article means: “automatically linking the field of one object to the field of another object”. This means that when two objects are connected, when the value of one of the objects (source) changes, the value of the other object (target) automatically changes. Linking can occur between any two objects, such as simple objects (plain objects), arrays, DOM elements, or browser plugins.
Example
In this simple example, you associate an input element with an object field:
Mutation Events
In the case of linking a source with a target, it becomes necessary to receive notifications when the data associated with the source has changed and, therefore, can be sent to the target object. Especially for this purpose, our plugin adds a few special events in jQuery, which can be used by themselves.
attrChange
The 'attrChange' event occurs when the attribute of a DOM element or object is changed by jQuery.fn.attr or jQuery.attr methods. An interesting feature of this plugin is that it allows jQuery.fn.attr to be used for simple objects and arrays. The data (), bind (), and trigger () methods also work with simple objects, so this is a natural extension that is already widely applicable in jQuery.
However, a small change in jQuery.attr is necessary in order to avoid special cases where the target is a simple object. For example, rename a class to className, readonly to readOnly, change the behavior when negative width values ​​are ignored and other cases. After that, there is an official possibility to use attr () to set fields for objects, as you might expect.
The attrChange event can also be used to capture changes made through the val () and data () methods. Please note that a special agreement is proposed on how the change is presented as an event. Combining different data-changing methods that call the same event makes it easier to handle the event and prevents the need for separate dataChange and valChange events. It would be good, in fact, if attr () was thought of as the primary method for changing and maintaining for example, $ (..). attr (“data: foo”, “bar”) or $ (..). attr (“val”, “123”). So far, this has not been implemented and is open to discussion.
attrChanging
The plugin also raises the event before the change, giving the handler the opportunity to cancel the operation. This is not a required feature to support binding, but a simple addition included here for discussion. The 'attrChanging' event occurs when an attribute of a DOM element or object needs to be changed. The ev.preventDefault () method can be called to prevent changes.
arrayChange
It looks like an attrChange event, but it occurs when an array is modified through any of the new modifying APIs. Information about what change occurred is available through the event object.
The following array change events are available as static methods for the jQuery object: push, pop, splice, shift, unshift, reverse, sort . Arguments for each of them are set the same way, except that the first argument is an array.
Like 'attrChange', the 'arrayChange' event supports filtering by operation.
arrayChanging
The same as the attrChanging event, only for arrays. The operation can be canceled through the ev.preventDefault () method.
Linking Objects
When objects are connected, changes in one are automatically sent to another. For example, this allows you to very quickly and simply associate form fields with an object. Any changes to the form fields will be automatically sent to the object, saving you from writing code. Moreover, the built-in support for converters allows you to change the format or type of value on the fly between objects (for example, formatting a phone number or parsing a string into a number).
jQuery.fn.linkTo
Establishes a relationship that directs changes to any source object to a single target object.
Also supported by the transfer in the settings of the object instead of many parameters.
jQuery.fn.linkFrom
Establishes a relationship that pulls changes from one source object for each target object.
jQuery.fn.linkBoth
Establishes a double bond by connecting two objects with each other. Changing any object is sent to another object. The equivalent is to call linkTo and linkFrom right away.
jQuery.convertFn
Often there is a need to modify values ​​on the fly on the one hand due to the other. For example: converting null to “None”, formatting or parsing a string into a number. The binding API supports the specification of the conversion function, both through the definition in jQuery.convertFn, and by itself.
The plugin comes with one ready-made converter named “!”, Which is an example of the converter implementation.
The functions of the converter take the value in the first parameter. They also accept the settings of an object that matches the parameters passed when using the binding API. This allows you to easily parameterize the converter.
We look forward to your feedback!
- Dave Reed
Source: https://habr.com/ru/post/92345/
All Articles