Data binding to the DOM is just one of those things that's damn handy when you've got it and super laborious when you don't. The problem is that it usually comes at a price of a hefty framework (hefty can apply to byte-size, but more often: the learning curve to use said framework).
So, as any good re-inventer of wheels, I wrote my own two-way data binding library, partly to experiment, partly to solve existing needs in my own projects - weighing in at < 2K compressed.
I present (cleverly named): bind.js
Demo time
Below is an interactive demo of bind in action. As you change the state of the form, you'll see the object update on the right (a JSON.stringify
output).
Example usage
The concept behind the API is fairly simple: take an object bind it to functions and/selectors given a particular mapping.
For example, to bind a score and player name to the DOM:
var user = Bind({
name: '[new user]',
game: { score: 0 }
}, {
'game.score': 'span.score',
name: 'input[name="username"]'
})
// in the game
user.game.score += 25;
...and the HTML updates take care of themselves. Then the user enters their name in the input field, it'll update the user
object.
The mapping value is flexible too, and can be:
- A string representing a selector
- A function which receives the new value
- An object that supports any of the following properties:
dom
,callback
andtransform
With an object as the value of the mapping, it allows you to do a transform on your data before it lands in the DOM. This is obviously useful for things like updating list elements:
var data = Bind({
cats: ['nap', 'sam', 'prince']
}, {
cats: {
dom: '#cats',
transform: function (value) {
return '<li>I had a cat called <em>' + this.safe(value) + '</em></li>';
}
},
'cats.0': {
dom: '#first-cat',
transform: function (value) {
return 'My first cat was ' + this.safe(value);
}
}
});
Inside the transform
function also has a helper, this.safe()
which will escape your content safe for HTML.
Object.observe?
Nope. I'm not using it, which is also why there's some limitations (property deletion being the main/only one).
Why not? Mostly for a larger platform of support. This library supports IE9 upwards (and thus all other browsers) and includes feature detection.
I also tried an Object.observe
polyfill early on, but didn't have much success (though I don't recall what the issues were). I also fancies the code challenge :)
HTML decorators?
Nope (again). I was recently debugging some Knockout code, and found myself struggling as I realised that the actual binding was happening in the HTML, and the manipulation was happening in the separate JavaScript file.
So no, there's no data-*
support, intentionally. All the code lives in one place: in the JavaScript.
I personally like that my data binding is all in one place. If you're not so keen, there's always Angular, Knockout and the like.
Nice to haves
I've started opening a few issues on things I'd like, but they currently include:
- Root object mapping support (i.e. to be able to hook a callback on anything changing)
- Glob support, i.e.
me.*.name
will fire callbacks matching any path starting withme
and ending withname
- Test to test every individual form element (currently it's a bit of a mishmash)
Feel free to raise an issue or feature request or let me know if you'd use this even!
LemonadeJS is another micro-library (4K), with no dependencies worth looking at. https://lemonadejs.net https://github.com/lemonadejs/lemonadejs
Thanks for your nice simple tool. I used it as a core component for my chess FEN editor: https://shaack.com/projekte/cm-fen-editor/ and it works great. It's a nice alternative for oversized frameworks... like... you know.
Have you thought of remaking this with ES6 proxies?
Useful, gonna try it now :)
Worth mentioning that Object.observe() has been deprecated and it'll be removed soon in all browsers.
hmmm, why they do such things...
The demo dies after a few seconds with
"ReferenceError: Bind is not defined
Try opening the bin directly.
Exactly the same thing happens - ah, it was privacy badger blocking cdn.rawgit.com
Quick question: if I understand correctly Angular does the MODEL to VIEW way using a polling mechanism every 100ms. I looked through the code to see if how you were doing it but was not able to figure it out. Could you comment on your technique here? Do you need special accessors (setter/getter)? Thanks for your answer. Keep up the good work.
Any comment on the "technique here"? Very curious. Also, Bind.js looks like just what I've been looking for!
Works awesome, except for TEXTAREA binding.
Long time to reply to this, but I fixed textarea support a while back. Thank you!
Thanks for the great bind.js library. However as others pointed out it still does not work with textarea. I tried it in my project and your demo bin, but it does not work. Do you have an example for it? Thanks once again.
In case it takes a while to get an answer - this was my workaround using jQuery
var data = Bind(...);
$(document).on("change","textarea.two-way",function(){
data.me.description = $(this).val(); // Trigger onchange
});
I wanted to do a lot of textareas :)
I see the commit where you added textarea support but cannot make it work no matter what I try. A simple textarea example added to the form elements example would be super useful.
I am curious, how does it compare to http://rivetsjs.com, which seems to be just a data binding library too.
Rivets contributor here – I think the main difference lies in how you declare your bindings. In Rivets, you declare the bindings in your template (or directly in the dom). Logic stays in your javascript, but you are explicitly marking up your view with bindings to your model. This library, conversely, keeps all binding declarations in your javascript, as Remy says himself above – this is his explicit aim, to keep binding decorators out of the html view. Rivets is also larger, more mature, with a really cool system for swapping out almost all its core processes (change-observers, binding transformers, etc) with your own implementations. But one thing Rivets can't do at the moment is build out a brand new model from the view, rather than the other way around. I'd be interested to hear from Remy if this is possible with Bind.js
Hi Ben - thanks for taking the time to reply.
Can you explain (maybe in pseudo code) what you'd expect from "build out a brand new model from the view"?
Of course. I will do it in "rivets pseudo code" as that's what I know.
Currently, you declare bindings in the html like
<p rv-text="product.price"></p>
When you call
rivets.bind(view, model)
, rivets takes your objectvar model = { product: { price: '123' } }
And sets the
textContent
in thep
tag to 123. But if you are compiling static html views (e.g. using Jekyll or Roots or some other static site generator), it makes sense to put that data in the dom at compile time. But you still want the binding to be dynamic. Rivets cannot, currently, parse the html for values already rendered and turn that into a javascript model object.Could you do this with Bind.js?
Ah, interesting. Well, you couldn't with 0.4.0, but you can now with 1.0.1 :) (though there was only one release, and I wanted the version on 1.x rather than 0.x).
If you want to set the value from the DOM into the Bind.js object, then you do (for example):
<p class="price">123</p>
In JS:
``var model = new Bind({
price: null,
}, {
price: '.price',
});
console.assert(model.price === '123');``
Fairly straight forward change - it just needs the model to have a
null
value to indicate that the value should come from the DOM (which I'll add to the README).On Safari is the first thing you do is a click on the progress know you get a nice browser crash. Can't tell why
I've just tried Safari on the desktop (Yosemite) and it doesn't crash for me. Could you file an issue? Also, the progress element isn't clickable, so I'm guessing you hit the range element instead?
nice, IE8 doesn't work because of ES5 (would shim work?)
That's right - it's possible to add polyfills, but it wasn't a particular aim of the project (to keep it "simple"...since the binding code was actually quite tricky!)