Einfache Implementierungsmethode der bidirektionalen Datenbindung im JS-Projekt

  <ul>

       <li Klasse="Block-Telefon reparieren bd-bottom">

            <label for="J_verificationPhone" data-bind-phone="tishi"><span>Telefonnummer</span></label>

            <input class="fix1" id="J_verificationPhone" data-bind-phone="name" name="telefon" type="text" />

            <button Klasse="rechts J_clickTime" Typ="button">

            <span class="award-messages-btn2 J_messagesBtn1">Bestätigungscode erhalten</span>

            <span class="award-messages-btn2 J_messagesBtn2 none"><i>Nach 60</i> Sekunden erneut senden</span>

          </button>

     </li>

       <li class="Blocküberprüfungs-Fix">

            <label for="J_verificationCode"><span>Verifizierungscode</span></label>

            <input class="fix1" data-bind-code="tishi" id="J_verificationCode" data-bind-phone="name" name="verification-code" class="" type="" />

       </li>

   </ul>

/**
 * Funktion verificationCallback Rückrufmethode * [$btn1 Beschreibung]
 * data-bind-phone="Name"
 * @message {[type]} Das geänderte Feldtelefon
 * @prop_name {[type]} Wertname des Feldes
 * @target {[Typ]} Ziel-JSdom-Objekt;
 * @targetValue {[type]} Wert des Ziel-jsdom-Objekts
 */// Hören Sie auf die Rückruffunktion, die Funktion erhält den Wert des Zielwerts, das Ziel-JS-DOM-Objekt, was für die Bedienung der geänderten Felder praktisch ist! ! !
var Benutzer = erforderlich('../../entry/module/twoWayAudio.js');
var Telefon = neuer Benutzer ('Telefon', Überprüfungs-Rückruf);
 Funktion verificationCallback(Nachricht,Eigenschaftsname,Ziel,Zielwert){
}

Funktion DataBinder(Objekt-ID, Verifizierungs-Callback){
  // Erstelle ein einfaches pubSub Objekt var pubSub = {
Rückrufe: {},
ein: Funktion(Nachricht,Rückruf) {
dies.callbacks[msg] = dies.callbacks[msg] || [];
dies.callbacks[msg].push(callback);
},
veröffentlichen: function(msg) {
\

dies.callbacks[msg] = dies.callbacks[msg] || [];
für (var i = 0, len = this.callbacks[msg].length; i < len; i++) {
dies.callbacks[msg][i].apply(dies,Argumente);
};
}
},

data_attr = "Datenbindungs-" + Objekt-ID,
Nachricht = Objekt-ID + ":Ändern",
changeHandler = Funktion(Ereignis) {
var target = event.target || event.srcElement, // IE8-kompatibel prop_name = target.getAttribute(data_attr);
wenn (Eigenschaftsname && Eigenschaftenname !== "") {
if (Verifizierungs-Rückruf) {
var Zielwert = Ziel.Wert;
verificationCallback (Nachricht, Eigenschaftenname, Ziel, Zielwert);
}
pubSub.publish(Nachricht, Eigenschaftsname, Zielwert);
}
};

// Auf Ereignisänderungen warten und an PubSub weiterleiten
wenn (Dokument.addEventListener) {
document.addEventListener("keyup",changeHandler,false);
} anders{
// IE8 verwendet attachEvent statt addEventListener
Dokument.attachEvent("onkeyup",changeHandler);
};

// pubSub propagiert Änderungen an alle gebundenen Elemente pubSub.on(message,function(event,prop_name,new_val){
var Elemente = document.querySelectorAll("[" + data_attr + "=" +prop_name + "]"),
Tagname;
für (var i = 0, len = Elemente.Länge; i < len; i++) {
tag_name = Elemente[i].tagName.toLowerCase();
wenn (tag_name === "Eingabe" || tag_name === "Textbereich" || tag_name === "Auswählen") {
Elemente[i].Wert = neuer_Wert;

} anders{
Elemente[i].innerHTML = neuer_Wert;
};
};
})
gib pubSub zurück;
}

Funktion Benutzer(uid,verificationCallback) {
  var binder = neuer DataBinder(uid,verificationCallback),
  Benutzer = {
  Attribut: {},
  // Der Attribut-Setter verwendet den Datenbinder pubSub zum Veröffentlichen von set : function (attr_name, val) {
  dieses.Attribut[attr_name] = Wert;
  binder.publish(uid + ":ändern",attr_name,val,this);
  },
  get : Funktion (Attr_Name) {
  gib dieses Attribut zurück[attr_name];
  },
  _binder : binder
  };

binder.on(uid + ":change",Funktion(Ereignis,Attr_Name,neuer_Wert,Initiator) {
if (initiator !== benutzer) {
Benutzer.set(attr_name,neuer_Wert);
}
});
Benutzer zurückgeben;
}
module.exports = Benutzer;
// Telefon.set( "Name", "lwl" );
  // phone.set( "tishi", "Telefon" );

 $('.block-phone #phone')[0].oninput=Funktion(){
 konsole.log($(dies))
}