[Tiny two way data binding](https://remysharp.com/2015/06/02/bind "Permanent Link: Tiny two way data binding")

Below is an [interactive demo](http://rem.jsbin.com/nepuda/edit?console,output) 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).

The concept behind the API is fairly simple: take an object bind it to functions and/selectors given a particular mapping.

[For example](https://jsbin.com/remutu/edit?js,console,output), to bind a score and player name to the DOM:

…​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:

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](https://jsbin.com/nemubo/1/edit?js,output):

Inside the transform function also has a helper, this.safe() which will escape your content safe for HTML.

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 :)

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.

I’ve started opening a few [issues](https://github.com/remy/bind/issues) on things I’d like, but they currently include:

Feel free to [raise an issue](https://github.com/remy/bind/issues) or feature request or let me know if you’d use this even!

Published 2-Jun 2015 under #code. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/bind.md)

Lock Thread

Login

Add Comment[M ↓   Markdown]()

[Upvotes]()[Newest]()[Oldest]()


Paul Hodel

0 points

2 years ago

LemonadeJS is another micro-library (4K), with no dependencies worth looking at. https://lemonadejs.net https://github.com/lemonadejs/lemonadejs


0 points

3 years ago

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.


Ollie Williams

-1 points

6 years ago

Have you thought of remaking this with ES6 proxies?


josip haboić

0 points

7 years ago

Useful, gonna try it now :)


Aurelio De Rosa

0 points

7 years ago

Worth mentioning that Object.observe() has been deprecated and it’ll be removed soon in all browsers.


Juan Pastás

0 points

7 years ago

hmmm, why they do such things…​


Stu

0 points

8 years ago

The demo dies after a few seconds with

"ReferenceError: Bind is not defined


rem

0 points

8 years ago

Try opening the bin directly.


Stu

0 points

8 years ago

Exactly the same thing happens - ah, it was privacy badger blocking [cdn.rawgit.com](http://cdn.rawgit.com)


Andres C. Rodriguez

0 points

8 years ago

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.


CodySCarlson

0 points

6 years ago

Any comment on the "technique here"? Very curious. Also, Bind.js looks like just what I’ve been looking for!


Poster

0 points

8 years ago

Works awesome, except for TEXTAREA binding.


rem

1 point

7 years ago

Long time to reply to this, but I fixed textarea support a while back. Thank you!


Penuel

1 point

6 years ago

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.


csev

0 points

6 years ago

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 :)


csev

0 points

6 years ago

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.


vitmalina

0 points

8 years ago

I am curious, how does it compare to http://rivetsjs.com, which seems to be just a data binding library too.


Ben Styles

0 points

8 years ago

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


rem

0 points

8 years ago

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"?


Ben Styles

0 points

8 years ago

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 object

var model = { product: { price: '123' } }

And sets the textContent in the p 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?


rem

1 point

8 years ago

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](https://github.com/remy/bind.js/commit/fa736bbbdb9b5a7fc8243ebcbfe81231fd6b6d32#diff-8c3cba4d9eb16ca73c7ce483e4575241) 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).


Mircea Militaru

0 points

8 years ago

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


rem

0 points

8 years ago

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?


hexx

0 points

8 years ago

nice, IE8 doesn’t work because of ES5 (would shim work?)


rem

0 points

8 years ago

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

[Commento](https://commento.io)