Jquery Data Binding Example - Jquery
How to bind data in jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Data binding is the process of establishing connection between ui and Domain logic. The code triggers an event when you click the button. Here the below code is used to get random value using jquery bind data.
<h3>Simple Get Random Number</h3>
<button id="button">Get Random Number</button>
<h4 id="status">2</h4>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>
// Example of extending an empty jQuery object and using it to pass data around
var GetRandomNumber = $.extend($({}),(function(rm) {
// Public Things
rm.getrandom = function(limit) {
var rand=Math.floor((Math.random() * limit) + 1); ;
rm.trigger('getval',[{val:rand}]);
};
return rm;
})($({})));
// DOM event handlers
$('#button').on('click',function() {
GetRandomNumber.getrandom(10);
});
// Data event handlers with chaining and namespaces (thanks jQuery)
GetRandomNumber
.on('getval',function(e, data) {
$('#status').html(data.val);
})
</script>
