Maison > Article > interface Web > Exemples pour expliquer comment jQuery implémente la fonction de liaison bidirectionnelle HTML
Exemples pour expliquer comment jQuery implémente la fonction de liaison bidirectionnelle HTML
- 小云云original
- 2017-12-27 09:19:191906parcourir
Cet article présente principalement la fonction de liaison bidirectionnelle de jQuery pour réaliser du HTML et implique les compétences opérationnelles associées de jQuery pour la liaison d'événements des éléments de page HTML. J'espère que cela pourra aider tout le monde. .
L'exemple de cet article décrit comment jQuery implémente la fonction de liaison bidirectionnelle du HTML. Partagez-le avec tout le monde pour votre référence, comme suit :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
var user = new User('123');
$(function(){
user.set( "name", "99" );
});
function GetData() {
alert(user.attributes.name);
}
function DataBinder( object_id ) {
var pubSub = jQuery({});
var data_attr = "bind-" + object_id,
message = object_id + ":change";
jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
var $input = jQuery( this );
pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
});
pubSub.on( message, function( evt, prop_name, new_val ) {
jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
var $bound = jQuery( this );
if ( $bound.is("input, textarea, select") ) {
$bound.val( new_val );
} else {
$bound.html( new_val );
}
});
});
return pubSub;
}
function User( uid ) {
var binder = new DataBinder( uid ),
user = {
attributes: {},
set: function( attr_name, val ) {
this.attributes[ attr_name ] = val;
binder.trigger( uid + ":change", [ attr_name, val, this ] );
},
get: function( attr_name ) {
return this.attributes[ attr_name ];
},
_binder: binder
};
binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
if ( initiator !== user ) {
user.set( attr_name, new_val );
}
});
return user;
}
</script>
</head>
<body>
<input type="text" data-bind-123="name" /><br/>
<input type="button" onclick="GetData();" value="获取数据"></p>
</body>
</html>Recommandations associées :
Partager un exemple de didacticiel de liaison bidirectionnelle Angular js
Partage de trois façons d'implémenter la liaison de données bidirectionnelle en JavaScript
Liaison unidirectionnelle Vuejs, liaison bidirectionnelle, rendu de liste, fonction de réponse
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!