Leichte Bibliothek für bidirektionale HTML-Bindungen

TL; DR Grundsätzlich möchte ich die Zwei-Wege-Bindung von AngularJS (das ist richtig, AngularJS, nicht Angular) ohne den Rest von AngularJS.

Meine Lieblingssache bei der Verwendung von AngularJS ist, wie einfach die Datenbindung ist. Es ist so einfach, ich füge einfach ein ng-appTag und einen Controller in meinen HTML-Code ein, initialisiere meine App mit ein paar Zeilen JavaScript-Code, und dann wird ein {{variableValue}}in meinem HTML-Code automatisch mit dem $scope.variableValue des Controllers gefüllt.

Gibt es eine Bibliothek, die nur das tut? (Mir ist klar, dass ich nur die unidirektionale Bindung beschrieben habe, daher akzeptiere ich auch Bibliotheken, die unidirektionale Bindungsantworten ausführen).

Nur um das klarzustellen, ich habe mir ein paar andere Bibliotheken angesehen, die dies tun, und keine von ihnen macht es auf der HTML-Seite so einfach. In diesen anderen Frameworks wie bind von Remy Sharp oder RivetJS muss ich entweder ein <span id="variableValue"></span>Konzept haben oder ich muss explizit angeben, dass die variableValueVariable an ein Element gebunden wird, das durch definiert wird #variable-value, usw.

Was ich suche ist:

  1. Ein bisschen Konfiguration (das ist subjektiv, ich weiß, aber es ist ein Anfang).
  2. {{variableName}}im HTML
  3. $scopeVariable.variableNamein JavaScript
  4. und die beiden zusammenbinden und ... einfach funktionieren.
Nun, Vue ist leichter als AngularJs, also könnte ich das wohl als Antwort posten, aber warum magst du AngularJs nicht? (Ich benutze selbst noch 1.x und bin zufrieden damit. Ich habe mittlerweile ein paar Projekte, aus denen ich kopieren/einfügen kann, um andere zu erstellen, weshalb ich noch nicht zu Vue gewechselt bin)
Ups, jetzt verstehe ich ... <div v-bind:class="{ active: isActive }"></div>. Ist das ein Deal Breaker, hinzufügen v-bind:zu müssen, um verwenden zu können { active: isActive }?
@Mawg nein, es ist kein Deal Breaker, aber Vue ist eher ein ganzes Framework als eine kleine Bibliothek und etwas schwerer. Dasselbe gilt für AngularJS. Was ich in dem Beitrag nicht erwähnt habe, ist, dass ich versuche, es zusammen mit Framework7 zu verwenden , also möchte ich nicht ganze AngularJS-Konzepte wie eine App mit den eigenen Konzepten von Framework7 wie der Framework7-App mischen müssen. Jetzt weiß ich, dass Framework7 bereits ein Vue-Plugin hat, aber ich liebe die Einfachheit der Konstrukte von Core Framework7 viel mehr als die Konstrukte des Vue-Plugins. Ich werde etwas Vanille verwenden, wenn ich muss.
Hm, sieht interessant aus. Aber warum nicht Cordova oder ähnliches? Heutzutage scheint es so viele dieser plattformübergreifenden Frameworks zu geben, dass ich keine Zeit habe, sie alle auszuprobieren. Kann es auf Kamera und Mikrofon zugreifen? Adressbuch & Fotos?
@Mawg Sie denken vielleicht viel zu groß für das, was ich versuche zu tun. Ich habe eine bestimmte Reihe von Anforderungen, die ich zu erfüllen versuche - 1. eine Webanwendung, 2. eine robuste Benutzeroberfläche, 3. sehr schnelle und schnelle Entwicklung, 4. für die Verwendung durch weniger als 10 Benutzer (insgesamt), daher ist eine Skalierung nicht möglich Problem für jetzt. Cordova würde deutlich mehr Start erfordern und es ist auch so gebaut, dass es zu nativen Apps skaliert und kompiliert werden kann - ich brauche nichts davon. Aus diesem Grund hatte ich gehofft, eine kleine Bibliothek zu finden, die ich an Framework7 anhängen kann. Wenn ich wirklich skalieren müsste, würde ich einfach die Vue- oder React-Plugins von Framework7 verwenden, die gut entwickelt sind.

Antworten (1)

Sie könnten einige leichte Bibliotheken verwenden:

1)Vue.js

Es müssen nur ein paar Zeilen hinzugefügt werden, und es gibt keinen Framework-Overhead wie in Angular.js oder Angular

Importieren:

<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!'
  }
})

Das ist es. Es ist wirklich leicht

2) Rivets.js, es ist noch leichter als Vue.

Importieren:

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

HTML:

<input rv-value="name">

Javascript:

rivets.bind($('input'), {name: 'Your name'})
Vue.js ist eine gute Antwort, da ich angefangen habe, mich eingehender damit zu befassen, da es sicherlich halb so groß ist wie das AngularJS-Framework (minifiziert und gzippt) und es möglicherweise das ist, was ich verwende, da es sich um eine nicht aufdringliche Ergänzung handelt. Das heißt, ich kann es neben anderen Komponenten verwenden, die ich habe, ohne sie zu beschädigen. Es ist jedoch eher ein Framework als eine Bibliothek und bringt mehr mit sich als nur eine bidirektionale Bindung. Dies ist kein Deal-Breaker. Rivets.js scheint etwas weniger benutzerfreundlich zu sein als die Bindung von Remy Sharp, die ich Rivets vorziehe. Ich sehe jedoch, dass Rivets die Attributbindung einfacher macht als die Bindung.
Nach langem Nachdenken und Herumspielen habe ich entschieden, dass Vue.js eine 100% richtige Antwort auf meine Frage ist. Da ich kein "#5) angegeben habe, bringt kein anderes Zeug mit / muss wirklich klein sein", dann werden die anderen 4 Anforderungen von Vue.js vollständig und vollständig erfüllt. RivetsJS ist eigentlich auch eine weitere fantastische Antwort, je mehr ich damit spiele, und es ist wirklich nur die Bindung, nach der ich ursprünglich gesucht habe. Vielen Dank.
Leichte Bibliothek für bidirektionale HTML-Bindungen
AntwortenHierDatenschutz-Bestimmungen1y, 0v