Exemples pour expliquer comment jQuery implémente la fonction de liaison bidirectionnelle HTML-js tutoriel-php.cn

Exemples pour expliquer comment jQuery implémente la fonction de liaison bidirectionnelle HTML

小云云

Libérer： 2017-12-27 09:19:19

original

1962 Les gens l'ont consulté

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(&#39;123&#39;);
$(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>

Copier après la connexion

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!