Jquery: Add a value binding variable

Created on 8 Jul 2020  路  7Comments  路  Source: jquery/jquery

Add a value binding.

jQuery.event('title',function(e){ jQuery('#title').html('Title page: '+this)});
jQuery.event('title',function(e){ jQuery('#footer').html('Title page: '+this)});
jQuery.var('title','New Name Page');

jQuery.event('cost',function(e){ jQuery('#cost').html('Cost: '+this + ' $')});
jQuery.event('cost',function(e){ jQuery('#allcost').html('All cost for all products: '+this + ' $')});
jQuery.var('cost',500);

var cost = jQuery.var('cost');
var tax = 1.3;
jQuery.var('cost', cost * tax);
//After that, all price bindings will be updated automatically. 
//And all functions binded to this price value will be performed again.

This functionality will allow you to compete with React.
This functionality will allow you to take 30% of React users.
All programmers who need to solve a problem with 10 bindings will need only one jQuery library.
Those who already use jQuery will not need to add a new React library, since jQuery will support binding from the box.
This will separate the business logic from the site layout.

All 7 comments

Possible additional options.
jQuery.event('cost', '#cost');
jQuery.event('cost', '#allcost'); - Short binding, Value will be added to tags by a selector.
jQuery.event('cost', '#allcost',false); - Value will be unbind for selector.

jQuery.event('title',{data:' 1 quantity'},function(e){ jQuery('#title').html('Title page: '+this + ' - ' + e.data)});
jQuery.event('title',{data:' 10 quantity'},function(e){ jQuery('#footer').html('Title page: '+this + ' -' + e.data)});

jQuery.event('title',function(e){ e.onetime =true; jQuery('#footer').html('Title page: '+this)});
jQuery.event('title',function(e){ jQuery('#footer').html('Title page: '+this); return false;}); - One-time binding. After that, it will be unbind.
var eventsTitle =jQuery.event('title'); - get list all binding for one variable 'title' , allows you to delete the binding.

Possible additional options:
jQuery.eventFormat('cost', 'Total amount: ${a * b} $.');

Possible additional options:
jQuery.event('title','funcTitle', function(e){ ... }); - Bind event with name funcTitle
jQuery.event('title','funcFooter', function(e){ ... }); - Bind event with name funcFooter
jQuery.event('title','funcFooter', false); - Unbind event with name funcFooter

To create all possible variants (var,event), jQuery already contains everything that is required for this.
All that remains is to make features in the function . But after the functions are designed, jQuery can compete with any other framework.

Format fucntions:
jQuery.event(var_name, [selector/funcName,] [data,] [handler/disable] );
jQuery.var(var_name, [value,] [format_string]);
jQuery.eventFormat(var_name, format_string);
No comments

Thanks for opening an issue. jQuery is a DOM library and is not looking to compete with React. That said, feel free to write a plugin implementing this feature and see how it goes.

@timmywil But let me explain in my second comment how binding works with DOM.

jQuery.event('cost', '#cost');
jQuery.event('cost', '#allcost'); - Short binding, Value will be added to tags by a selector.
jQuery.event('cost', '#allcost',false); - Value will be unbind for selector.

The second attribute is the jQuery selector DOM attribute
<span id="cost"></span>
<span id="allcost"></span>
jQuery.each() the same mathematical function, but not related to DOM. For example, the binding of tags by value.

Was this page helpful?
0 / 5 - 0 ratings