Biblioteca de enlace bidireccional HTML ligero

TL; DR Básicamente, quiero el enlace bidireccional de AngularJS (así es, AngularJS, no Angular) sin el resto de AngularJS.

Lo que más me gusta de usar AngularJS es lo fácil que es el enlace de datos. Es tan simple, solo incluyo una ng-appetiqueta y un controlador en mi HTML, inicializo mi aplicación con unas pocas líneas de código JavaScript y luego una {{variableValue}}en mi HTML se completa automáticamente con el $scope.variableValue del controlador.

¿Hay alguna biblioteca que solo haga esto? (Me doy cuenta de que solo describí el enlace unidireccional, por lo que aceptaré bibliotecas que también hagan respuestas de enlace unidireccional).

Para que quede claro, he mirado algunas otras bibliotecas que hacen esto, y ninguna de ellas lo hace tan fácil en el lado HTML. En estos otros marcos, como el enlace de Remy Sharp o RivetJS , debo tener un <span id="variableValue"></span>concepto o debo especificar explícitamente que la variableValuevariable se vincula a un elemento definido por #variable-value, etc.

Lo que estoy buscando es:

  1. Un poco de configuración (esto es subjetivo, lo sé, pero es un comienzo).
  2. {{variableName}}en el html
  3. $scopeVariable.variableNameen JavaScript
  4. y hacer que los dos se unan y ... solo funcionen.
Bueno, Vue es más liviano que AngularJs, así que supongo que podría publicar eso como respuesta, pero ¿por qué no te gusta AngularJs? (Todavía estoy usando 1.x y estoy contento con él. Tengo algunos proyectos ahora, desde los cuales puedo copiar/pegar para crear otros, razón por la cual aún no me he cambiado a Vue)
ups, ya veo... <div v-bind:class="{ active: isActive }"></div>. ¿Es eso un factor decisivo, tener que agregar v-bind:para poder usar { active: isActive }?
@Mawg no, no es un factor decisivo, pero Vue es más un marco completo que una pequeña biblioteca, y es un poco más pesado. Lo mismo ocurre con AngularJS. Lo que no mencioné en la publicación es que estoy tratando de usarlo junto con Framework7 , por lo que no quiero tener que mezclar conceptos completos de AngularJS, como una aplicación, con los propios conceptos de Framework7, como la aplicación Framework7. Ahora sé que Framework7 ya tiene un complemento Vue, pero me encanta la simplicidad de las construcciones de Core Framework7 mucho más que las construcciones del complemento Vue. Usaré algo de vainilla si es necesario.
Mmm, parece interesante. Pero ¿por qué no Córdoba o similar? Parece que hay tantos de estos marcos multiplataforma en estos días que no tengo tiempo para probarlos todos. ¿Puede acceder a la cámara y al micrófono? ¿Libreta de direcciones y fotos?
@Mawg, es posible que esté pensando demasiado en grande para lo que estoy tratando de hacer. Tengo un conjunto específico de requisitos que estoy tratando de cumplir: 1. una aplicación web, 2. una interfaz de usuario robusta, 3. desarrollo muy rápido y rápido, 4. Para uso de menos de 10 usuarios (total), por lo que escalar no es un asunto por ahora. Cordova requeriría mucho más inicio y también está diseñado para escalar y compilar en aplicaciones nativas; no necesito nada de eso. Es por eso que esperaba encontrar una pequeña biblioteca para agregar a Framework7. Si realmente necesitara escalar, simplemente usaría los complementos Vue o React de Framework7, que están bien desarrollados.

Respuestas (1)

Podrías usar algunas librerías ligeras:

1)Vue.js

Son solo unas pocas líneas para agregar y no hay sobrecarga de marco como en Angular.js o Angular

Importar:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

HTML:

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

JavaScript:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Eso es. es muy ligero

2) Rivets.js, es incluso más ligero que Vue.

Importar:

<script src="rivets.bundled.min.js"></script>

HTML:

<input rv-value="name">

JavaScript:

rivets.bind($('input'), {name: 'Your name'})
Vue.js es una buena respuesta desde que comencé a investigarlo con más profundidad, porque ciertamente tiene la mitad del tamaño del marco AngularJS (minificado y comprimido con gzip), y puede ser lo que uso, ya que es una adición no intrusiva. lo que significa que puedo usarlo junto con otros componentes que tengo sin romperlos. Sin embargo, es más un marco que una biblioteca y trae consigo más que un simple enlace bidireccional. Esto no es un factor decisivo. Rivets.js parece un poco menos fácil de usar que el enlace de Remy Sharp, que prefiero sobre Rivets. Sin embargo, veo que Rivets hace que el enlace de atributos sea más fácil que el enlace.
Después de mucha contemplación y jugar, he decidido que Vue.js es una respuesta 100% correcta a mi pregunta. Dado que no especifiqué un "# 5) no trae consigo ninguna otra cosa / tiene que ser muy pequeño", entonces los otros 4 requisitos están total y completamente satisfechos por Vue.js. RivetsJS es en realidad también otra respuesta fantástica cuanto más juego con él, y realmente es solo el enlace que estaba buscando originalmente. Gracias.
Biblioteca de enlace bidireccional HTML ligero
RespuestasAquíPolítica de privacidad1y, 0v