El código de enlace de datos dinámicos de Javascript no está funcionando.

22 Jul, 2023 Programación 0

Estoy escribiendo código que utiliza la vinculación de datos para cambiar el innerHTML de un span al valor ingresado por el usuario, pero no puedo hacer que funcione. Lo que debería hacer es mostrar el valor ingresado en el lado derecho del campo de entrada en ambos campos, pero no lo hace. ¿Alguien puede ayudarme, por favor?

HTML:
“`

Mi Framework Frontend

Nombre:

<div>
    <label>Apellido:</label>
    <input type="text" bit-data="LastName">
    <span bit-data-binding="LastName" style="margin-left: 1rem;"></span>
</div>
<script src="frontend-framework.js"></script>

Javacript:
const createState = (stateObj) => {
return new Proxy(stateObj, {
set(target, property, value) {
target[property] = value;
render();
return true;
}
});
};

const state = createState({
name: ”,
lastName: ”
});

const listeners = document.querySelectorAll(‘[bit-data]’);

listeners.forEach((element) => {
const name = element.dataset.bitData;
element.addEventListener(‘keyup’, (event) => {
state[name] = element.value;
console.log(state);
});
});

https://jsfiddle.net/Mauro0294/g3170whc/4/

davy.ai

July 22, 2023 at 12:01 am

Parece que hay un par de problemas con el código proporcionado.

En primer lugar, el atributo bit-data en el HTML debería coincidir con la propiedad dataset.model que se utiliza en JavaScript. Así que cambia bit-data por bit-data-model, o cambia element.dataset.model por element.dataset.data.

En segundo lugar, el atributo style en los elementos span está causando un problema con el diseño. Eliminando margin-left: 1rem de ambas etiquetas span debería solucionar el problema.

Por último, el dataset.binding utilizado en la función map en la función render debería ser dataset.bitDataBinding para que coincida con el atributo en el HTML.

Aquí está el HTML y JavaScript corregidos:

HTML:

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mi Framework Frontend</title>
</head>
<body>
    <div>
        <label>Nombre:</label>
        <input type="text" bit-data-model="name">
        <span bit-data-binding="name"></span>
    </div>

    <div>
        <label>Apellido:</label>
        <input type="text" bit-data-model="lastName">
        <span bit-data-binding="lastName"></span>
    </div>

    <script src="frontend-framework.js"></script>
</body>
</html>

JavaScript:

const createState = (stateObj) => {
  return new Proxy(stateObj, {
    set(target, property, value) {
      target[property] = value;
      render();
      return true;
    }
  });
};

const state = createState({
  name: '',
  lastName: ''
});

const listeners = document.querySelectorAll('[bit-data-model]');

listeners.forEach((element) => {
  const name = element.dataset.model;
  element.addEventListener('keyup', (event) => {
    state[name] = element.value;
    console.log(state);
  });
});

const render = () => {
  const bindings = Array.from(document.querySelectorAll('[bit-data-binding]')).map(
    e => e.dataset.bitDataBinding
  );
  bindings.forEach((binding) => {
    document.querySelector(`[bit-data-binding=${binding}]`).innerHTML = state[binding];
    document.querySelector(`[bit-data-model=${binding}]`).value = state[binding];
  });
}

es.davy.ai

¿Tienes una pregunta?

El código de enlace de datos dinámicos de Javascript no está funcionando.

Answer

davy.ai