javascript - ejemplo - getelementsbytagname

Cómo implementar el enlace de datos DOM en JavaScript (12)

¿Cómo funcionaría la encuadernación de objetos?
¿Cómo podría funcionar escuchar el cambio en la forma?

Una abstracción que actualiza ambos objetos.

Supongo que hay otras técnicas, pero en última instancia, tendría un objeto que contiene referencias a un elemento DOM relacionado y proporciona una interfaz que coordina las actualizaciones de sus propios datos y su elemento relacionado.

El .addEventListener() proporciona una interfaz muy agradable para esto. Puede asignarle un objeto que implemente la interfaz eventListener e invocará sus controladores con ese objeto como el valor de this .

Esto le da acceso automático tanto al elemento como a los datos relacionados.

Definiendo tu objeto

La herencia prototípica es una buena forma de implementar esto, aunque no es obligatorio, por supuesto. Primero crearías un constructor que reciba tu elemento y algunos datos iniciales.

function MyCtor(element, data) { this.data = data; this.element = element; element.value = data; element.addEventListener("change", this, false); }

Así que aquí el constructor almacena el elemento y los datos en las propiedades del nuevo objeto. También vincula un evento de change al element dado. Lo interesante es que pasa el nuevo objeto en lugar de una función como segundo argumento. Pero esto solo no funcionará.

Implementando la interfaz `eventListener`

Para que esto funcione, su objeto necesita implementar la interfaz eventListener . Todo lo que se necesita para lograr esto es darle al objeto un método handleEvent() .

Ahí es donde entra la herencia.

MyCtor.prototype.handleEvent = function(event) { switch (event.type) { case "change": this.change(this.element.value); } }; MyCtor.prototype.change = function(value) { this.data = value; this.element.value = value; };

Existen muchas formas diferentes de estructurar esto, pero para su ejemplo de coordinación de actualizaciones, decidí hacer que el método change() solo acepte un valor, y que handleEvent pase ese valor en lugar del objeto de evento. De esta manera, el change() puede invocarse sin un evento.

Así que ahora, cuando ocurra el evento de change , se actualizará tanto el elemento como la propiedad .data . Y lo mismo ocurrirá cuando llame a .change() en su programa JavaScript.

Usando el codigo

Ahora solo crearías el nuevo objeto y dejarías que realizara actualizaciones. Las actualizaciones en el código JS aparecerán en la entrada, y los eventos de cambio en la entrada serán visibles para el código JS.

var obj = new MyCtor(document.getElementById("foo"), "20"); // simulate some JS based changes. var i = 0; setInterval(function() { obj.change(parseInt(obj.element.value) + ++i); }, 3000);

DEMO: http://jsfiddle.net/RkTMD/

Por favor, trate esta pregunta como estrictamente educativa. Todavía estoy interesado en escuchar nuevas respuestas e ideas para implementar esto.

tl; dr

¿Cómo implementaría el enlace de datos bidireccional con JavaScript?

Enlace de datos al DOM

Por vinculación de datos con el DOM me refiero, por ejemplo, a tener un objeto JavaScript a con una propiedad b . Luego, al tener un elemento DOM <input> (por ejemplo), cuando el elemento DOM cambia, cambia a elemento y viceversa (es decir, me refiero al enlace de datos bidireccional).

Aquí hay un diagrama de AngularJS sobre cómo se ve esto:

Así que básicamente tengo JavaScript similar a:

var a = {b:3};

Luego un elemento de entrada (u otra forma) como:

<input type=''text'' value=''''>

Me gustaría que el valor de la entrada sea el valor de ab (por ejemplo), y cuando el texto de entrada cambie, también me gustaría que ab cambie. Cuando ab cambia en JavaScript, la entrada cambia.

La pregunta

¿Cuáles son algunas técnicas básicas para lograr esto en JavaScript simple?

En concreto, me gustaría una buena respuesta para referirme a:

¿Cómo funcionaría la encuadernación de objetos?
¿Cómo podría funcionar escuchar el cambio en la forma?
¿Es posible de una manera simple tener solo el HTML modificado en el nivel de la plantilla? Me gustaría no realizar un seguimiento del enlace en el documento HTML en sí, sino solo en JavaScript (con eventos DOM y JavaScript manteniendo la referencia a los elementos DOM utilizados).

¿Qué he intentado?

Soy un gran fan de Moustache, así que traté de usarlo para las plantillas. Sin embargo, tuve problemas al intentar realizar el enlace de datos en sí mismo, ya que el bigote procesa HTML como una cadena, por lo que, después de obtener su resultado, no tengo ninguna referencia a dónde se encuentran los objetos en mi modelo de vista. La única solución que podría pensar para esto fue modificar la cadena HTML (o el árbol DOM creado) con atributos. No me importa usar un motor de plantillas diferente.

Básicamente, tuve la fuerte sensación de que estaba complicando el problema en cuestión y hay una solución simple.

Nota: No proporcione respuestas que usen bibliotecas externas, especialmente las que tienen miles de líneas de código. He usado (y me gusta!) AngularJS y KnockoutJS. Realmente no quiero respuestas en la forma ''use framework x''. De manera óptima, me gustaría un futuro lector que no sepa cómo usar muchos marcos para comprender cómo implementar el enlace de datos bidireccional. No espero una respuesta completa , sino una que transmita la idea.

Ayer comencé a escribir mi propia forma de enlazar datos.

Es muy divertido jugar con él.

Creo que es hermoso y muy útil. Al menos en mis pruebas que usan Firefox y Chrome, Edge también debe funcionar. No estoy seguro de los demás, pero si es compatible con Proxy, creo que funcionará.

https://jsfiddle.net/2ozoovne/1/

<H1>Bind Context 1</H1> <input id=''a'' data-bind=''data.test'' placeholder=''Button Text'' /> <input id=''b'' data-bind=''data.test'' placeholder=''Button Text'' /> <input type=button id=''c'' data-bind=''data.test'' /> <H1>Bind Context 2</H1> <input id=''d'' data-bind=''data.otherTest'' placeholder=''input bind'' /> <input id=''e'' data-bind=''data.otherTest'' placeholder=''input bind'' /> <input id=''f'' data-bind=''data.test'' placeholder=''button 2 text - same var name, other context'' /> <input type=button id=''g'' data-bind=''data.test'' value=''click here!'' /> <H1>No bind data</H1> <input id=''h'' placeholder=''not bound'' /> <input id=''i'' placeholder=''not bound''/> <input type=button id=''j'' />

Aquí está el código:

Entonces, para establecer, simplemente:

var bindContext=SmartBind.BindContext(); SmartBind.add(bindContext, document.getElementById(''a'')); SmartBind.add(bindContext, document.getElementById(''b'')); SmartBind.add(bindContext, document.getElementById(''c'')); var bindContext2=SmartBind.BindContext(); SmartBind.add(bindContext2, document.getElementById(''d'')); SmartBind.add(bindContext2, document.getElementById(''e'')); SmartBind.add(bindContext2, document.getElementById(''f'')); SmartBind.add(bindContext2, document.getElementById(''g'')); setTimeout( function() { document.getElementById(''b'').value=''Via Script works too!'' }, 2000); document.getElementById(''g'').addEventListener(''click'',function(){ bindContext2.data.test=''Set by js value'' })

Por ahora acabo de agregar el enlace de valor HTMLInputElement.

Déjame saber si sabes cómo mejorarlo.

Cambiar el valor de un elemento puede desencadenar un evento DOM . Los escuchas que responden a eventos pueden utilizarse para implementar el enlace de datos en JavaScript.

Por ejemplo:

function bindValues(id1, id2) { const e1 = document.getElementById(id1); const e2 = document.getElementById(id2); e1.addEventListener(''input'', function(event) { e2.value = event.target.value; }); e2.addEventListener(''input'', function(event) { e1.value = event.target.value; }); }

Here hay un código y una demostración que muestra cómo los elementos DOM se pueden vincular entre sí o con un objeto JavaScript.

Creo que mi respuesta será más técnica, pero no diferente, ya que las otras presentan la misma cosa utilizando diferentes técnicas.
Entonces, lo primero es que la solución a este problema es el uso de un patrón de diseño conocido como "observador", que le permite desacoplar sus datos de su presentación, haciendo que el cambio en una cosa se transmita a sus oyentes, pero en este caso se hace de dos vías

Para el camino de DOM a JS

Para vincular los datos del DOM al objeto js, puede agregar un marcado en forma de atributos de data (o clases si necesita compatibilidad), como esto:

<input type="text" data-object="a" data-property="b" id="b" class="bind" value=""/> <input type="text" data-object="a" data-property="c" id="c" class="bind" value=""/> <input type="text" data-object="d" data-property="e" id="e" class="bind" value=""/>

De esta manera, se puede acceder a través de js utilizando querySelectorAll (o el antiguo amigo getElementsByClassName por compatibilidad).

Ahora puede vincular el evento escuchando los cambios en formas: un oyente por objeto o un gran oyente al contenedor / documento. El enlace al documento / contenedor activará el evento por cada cambio que se realice en él o en su hijo, tendrá una huella de memoria más pequeña pero generará llamadas de evento.
El código se verá algo así:

//Bind to each element var elements = document.querySelectorAll(''input[data-property]''); function toJS(){ //Assuming `a` is in scope of the document var obj = document[this.data.object]; obj[this.data.property] = this.value; } elements.forEach(function(el){ el.addEventListener(''change'', toJS, false); } //Bind to document function toJS2(){ if (this.data && this.data.object) { //Again, assuming `a` is in document''s scope var obj = document[this.data.object]; obj[this.data.property] = this.value; } } document.addEventListener(''change'', toJS2, false);

Para el modo JS do DOM.

Necesitará dos cosas: un metaobjeto que contendrá las referencias del elemento DOM de bruja está vinculado a cada objeto / atributo js y una forma de escuchar los cambios en los objetos. Básicamente es de la misma manera: debe tener una forma de escuchar los cambios en el objeto y luego vincularlo al nodo DOM, ya que su objeto "no puede tener" metadatos, necesitará otro objeto que contenga metadatos de alguna manera. que el nombre de la propiedad se asigna a las propiedades del objeto de metadatos. El código será algo así:

Espero que haya sido de ayuda.

Enlazar cualquier entrada html

<input id="element-to-bind" type="text">

define dos funciones:

function bindValue(objectToBind) { var elemToBind = document.getElementById(objectToBind.id) elemToBind.addEventListener("change", function() { objectToBind.value = this.value; }) } function proxify(id) { var handler = { set: function(target, key, value, receiver) { target[key] = value; document.getElementById(target.id).value = value; return Reflect.set(target, key, value); }, } return new Proxy({id: id}, handler); }

utilizar las funciones:

var myObject = proxify(''element-to-bind'') bindValue(myObject);

Entonces, decidí tirar mi propia solución en la olla. Aquí hay un violín de trabajo . Tenga en cuenta que esto solo funciona en navegadores muy modernos.

Lo que usa

Esta implementación es muy moderna: requiere un navegador (muy) moderno y los usuarios dos nuevas tecnologías:

MutationObservers para detectar cambios en el dom (los detectores de eventos también se utilizan)
Object.observe para detectar cambios en el objeto y notificar el dominio. Peligro, ya que esta respuesta ha sido escrita Oo ha sido discutido y rechazado por el ECMAScript TC, considere un polyfill .

Cómo funciona

En el elemento, coloque un mapeo domAttribute:objAttribute - por ejemplo bind=''textContent:name''
Lee eso en la función dataBind. Observe los cambios tanto en el elemento como en el objeto.
Cuando se produce un cambio, actualice el elemento relevante.

La solución

Aquí está la función dataBind , tenga en cuenta que es solo 20 líneas de código y podría ser más corta:

Aquí hay algo de uso:

HTML:

<div id=''projection'' bind=''textContent:name''></div> <input type=''text'' id=''textView'' bind=''value:name'' />

JavaScript:

var obj = { name: "Benjamin" }; var el = document.getElementById("textView"); dataBind(el, obj); var field = document.getElementById("projection"); dataBind(field,obj);

Aquí hay un violín de trabajo . Tenga en cuenta que esta solución es bastante genérica. Object.observe y mutación observador shimming está disponible.

Hay una implementación muy sencilla de enlace de datos bidireccional en este enlace " Enlace de datos bidireccional sencillo en JavaScript"

El enlace anterior, junto con las ideas de knockoutjs, backbone.js y agility.js, condujo a este marco MVVM ligero y rápido, ModelView.js ~~basado en jQuery~~ que juega muy bien con jQuery y del cual soy el autor humilde (o tal vez no tan humilde).

Reproducción de código de ejemplo a continuación (desde el enlace de la publicación del blog ):

Código de ejemplo para DataBinder

Para lo que concierne al objeto de JavaScript, una implementación mínima de un modelo de Usuario para este experimento podría ser lo siguiente:

Ahora, cuando queremos vincular las propiedades de un modelo a una parte de la interfaz de usuario solo tenemos que establecer un atributo de datos apropiado en el elemento HTML correspondiente:

// javascript var user = new User( 123 ); user.set( "name", "Wolfgang" );  <input type="number" data-bind-123="name" />

Me gustaría agregar a mi preposter. Sugiero un enfoque ligeramente diferente que le permitirá simplemente asignar un nuevo valor a su objeto sin utilizar un método. Sin embargo, se debe tener en cuenta que esto no es compatible con los navegadores especialmente antiguos e IE9 aún requiere el uso de una interfaz diferente.

Lo más notable es que mi enfoque no hace uso de eventos.

Hechiceros y Setters

Mi propuesta hace uso de la característica relativamente joven de getters y setters , particularmente solo setters. En términos generales, los mutadores nos permiten "personalizar" el comportamiento de cómo ciertas propiedades se asignan un valor y se recuperan.

Una implementación que Object.defineProperty aquí es el método Object.defineProperty . Funciona en Firefox, GoogleChrome y, creo, en IE9. No he probado otros navegadores, pero como esto es solo teórico ...

De todos modos, acepta tres parámetros. El primer parámetro es el objeto para el que desea definir una nueva propiedad, el segundo una cadena que se parece al nombre de la nueva propiedad y el último un "objeto descriptor" que proporciona información sobre el comportamiento de la nueva propiedad.

Dos descriptores particularmente interesantes son get y set . Un ejemplo sería el siguiente. Tenga en cuenta que el uso de estos dos prohíbe el uso de los otros 4 descriptores.

function MyCtor( bindTo ) { // I''ll omit parameter validation here. Object.defineProperty(this, ''value'', { enumerable: true, get : function ( ) { return bindTo.value; }, set : function ( val ) { bindTo.value = val; } }); }

Ahora haciendo uso de esto se vuelve ligeramente diferente:

var obj = new MyCtor(document.getElementById(''foo'')), i = 0; setInterval(function() { obj.value += ++i; }, 3000);

Quiero enfatizar que esto solo funciona para los navegadores modernos.

Fiddle de trabajo: http://jsfiddle.net/Derija93/RkTMD/1/

Es un enlace de datos bidireccional muy simple en vainilla javascript ....

<input type="text" id="inp" onkeyup="document.getElementById(''name'').innerHTML=document.getElementById(''inp'').value;"> <div id="name"> </div>

He analizado algunos ejemplos básicos de javascript utilizando onkeypress y onchange event handlers para hacer vistas vinculantes a nuestros js y js

Aquí ejemplo plunker http://plnkr.co/edit/7hSOIFRTvqLAvdZT4Bcc?p=preview

<!DOCTYPE html> <html> <body> <p>Two way binding data.</p> <p>Binding data from view to JS</p> <input type="text" onkeypress="myFunction()" id="myinput"> <p id="myid"></p> <p>Binding data from js to view</p> <input type="text" id="myid2" onkeypress="myFunction1()" oninput="myFunction1()"> <p id="myid3" onkeypress="myFunction1()" id="myinput" oninput="myFunction1()"></p> <script> document.getElementById(''myid2'').value="myvalue from script"; document.getElementById(''myid3'').innerHTML="myvalue from script"; function myFunction() { document.getElementById(''myid'').innerHTML=document.getElementById(''myinput'').value; } document.getElementById("myinput").onchange=function(){ myFunction(); } document.getElementById("myinput").oninput=function(){ myFunction(); } function myFunction1() { document.getElementById(''myid3'').innerHTML=document.getElementById(''myid2'').value; } </script> </body> </html>

Una forma sencilla de vincular una variable a una entrada (enlace bidireccional) es acceder directamente al elemento de entrada en el getter y setter:

var variable = function(element){ return { get : function () { return element.value;}, set : function (value) { element.value = value;} } };

En HTML:

<input id="an-input" /> <input id="another-input" />

Y utilizar:

var myVar = new variable(document.getElementById("an-input")); myVar.set(10); // and another example: var myVar2 = new variable(document.getElementById("another-input")); myVar.set(myVar2.get()); Una forma más elegante de hacer lo anterior sin getter / setter:

var variable = function(element){ return function () { if(arguments.length > 0) element.value = arguments[0]; else return element.value; } }

Usar:

var v1 = new variable(document.getElementById("an-input")); v1(10); // sets value to 20. console.log(v1()); // reads value.

<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <input type="text" id="demo" name=""> <p id="view"></p> <script type="text/javascript"> var id = document.getElementById(''demo''); var view = document.getElementById(''view''); id.addEventListener(''input'', function(evt){ view.innerHTML = this.value; }); </script> </body> </html>