2

TL;DR Basically I want AngularJS (that's right, AngularJS, not Angular)'s two-way binding without the rest of AngularJS.


My favorite thing about using AngularJS is how easy data binding is. It's so simple, I just include an ng-app tag and controller in my HTML, initialize my app with a few lines of JavaScript code, and then a {{variableValue}} in my HTML is automatically filled by the controller's $scope.variableValue.

Is there a library that does only this? (I realize I only described one-way binding, so I'll accept libraries that do one-way binding answers as well).

Just to be clear, I've looked at a few other libraries that do this, and none of them make it as easy on the HTML side. In these other frameworks, such as Remy Sharp's bind or RivetJS, I either have to have a <span id="variableValue"></span> concept, or I have to explicitly specify that the variableValue variable binds to an element defined by #variable-value, etc.

What I'm looking for is:

  1. A little bit of configuration (this is subjective, I know, but it's a start).
  2. {{variableName}} in the HTML
  3. $scopeVariable.variableName in JavaScript
  4. and have the two bind together and ... just work.
  • Well, Vue is more light-weight than AngularJs, so I suppose I could post that as an answer, but why don't you like AngularJs? (I am still using 1.x myself and am happy with it. I have a few projects by now, from which I can copy/paste to create others, which is why I haven't yet switched to Vue) – Mawg Sep 5 '18 at 10:34
  • oops, I see now ... <div v-bind:class="{ active: isActive }"></div>. is that a deal breaker, having to add v-bind: to be able to use { active: isActive }? – Mawg Sep 5 '18 at 10:35
  • 1
    @Mawg no it's not a deal breaker, but Vue is more of an entire framework than a little library, and it's a little heavier. The same is true with AngularJS. What I did not mention in the post is that I am trying to use it in tandem with Framework7, so I don't want to have to mix entire AngularJS concepts, like an app, with Framework7's own concepts, like the Framework7 app. Now I do know that Framework7 already has a Vue plugin, but I love the simplicity of Core Framework7's constructs much more than the Vue plugin's constructs. I'll use something vanilla if I must. – Michael Plautz Sep 5 '18 at 14:18
  • Hmm, Looks interesting. But why not Cordova or similar? There seem to be so many of these cross-platform frameworks these days that I don't have time to try them all out. Can it access camera & mic? Address book & photos? – Mawg Sep 5 '18 at 14:22
  • 1
    @Mawg you may be thinking way too big for what I'm trying to do. I have a specific set of requirements I am trying to fulfill - 1. a web application, 2. a robust UI, 3. very quick and rapid development, 4. For use by less than 10 users (total) so scaling is not an issue for now. Cordova would require significantly more startup and also it is built to scale and compile to native apps - I don't need any of that. This is why I was hoping to find a little library to append to Framework7. If I really needed to scale, I would just use Framework7's Vue or React plugins, which are well developed. – Michael Plautz Sep 5 '18 at 15:24
3

You could use some lightweight libs:

1) Vue.js

It's just a few lines to add and there's no framework overhead like in Angular.js or Angular

Import:

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

That's it. It's really lightweight

2) Rivets.js, it's even more lightweight than Vue.

Import:

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

HTML:

<input rv-value="name">

Javascript:

rivets.bind($('input'), {name: 'Your name'})
  • Vue.js is a good answer since I started looking into it in more depth, because it is certainly half the size of AngularJS framework (minified and gzipped), and it may be what I use, since it is a non-intrusive addition, meaning I can use it alongside other components I have without breaking them. However, it is more of a framework than a library and brings with it more than just two-way binding. This is not a deal-breaker. Rivets.js seems slightly less user-friendly than Remy Sharp's bind, which I prefer over Rivets. However, I do see that Rivets does make attribute binding easier than bind. – Michael Plautz Sep 9 '18 at 1:23
  • 1
    After much contemplation and playing around, I've decided that Vue.js is a 100% correct answer to my question. Since I didn't specify a "#5) doesn't bring with it any other stuff / has to be really small", then the other 4 requirements are completely and totally satisfied by Vue.js. RivetsJS is actually also another fantastic answer the more I play with it, and truly is only the binding like I was originally looking for. Thanks. – Michael Plautz Sep 10 '18 at 17:49

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.