Two-way bindings for Backbone.
Chimera will update your views when your models change.
It wil also update your models when your views change.
npm and include as a
require or AMD module:
var MyModel = BackboneModel;
var MyView = BackboneView;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My great app</title> </head> <body> <div class="js-first-name"></div> <input class="js-text-input"/> <h4>comments</h4> <ul> <li> <input class="js-comment"/> </li> <li> <input class="js-comment"/> </li> <li> <input class="js-comment"/> </li> </ul> <h4>last name so nice you'll see it twice</h4> <span class="js-lastname-1"></span> <span class="js-lastname-2"></span> </body> </html>
Given the above examples, here's what happens:
- Changes to firstName on the model will be automatically displayed in div.js-first-name
- Changes to .js-text-input's value automatically update the model field firstNameForTextInputEl
- Changes to firstNameForTextInputEl will update .js-text-input's value
- Changes to any of the .js-comment inputs will update the corresponding model in the comments collection (i.e. the second .js-comment's value will be stored in comments.at(1))
- For each .js-comment that exists in the view but not in the comments collection, a model at that index in comments will be created (i.e. in our case, there would be 3 items in the collection)
- Changes to any model in comments will update the corresponding element (or input value) in the view
- Changes to lastName will propagate to both .js-lastname-1 and .js-lastname-2
Feel free to open pull requests and I'll merge them.
This one goes out to the geniuses I work with every day at BuzzFeed.