There are many JavaScript MVC frameworks right now that work with Handlebars.js offering data binding between the model/controller and the template. Currently I'm implementing Handlebars.js alone (with jQuery) and needing to bind data between my main code and the template so the latter gets updated automatically. Is there a native way to do it in Handlebars or with a plugin? If there isn't, is there any component of these MVC frameworks that brings this functionality and can be used stand-alone without the full-stack framework?
There are many JavaScript MVC frameworks right now that work with Handlebars.js offering data binding between the model/controller and the template. Currently I'm implementing Handlebars.js alone (with jQuery) and needing to bind data between my main code and the template so the latter gets updated automatically. Is there a native way to do it in Handlebars or with a plugin? If there isn't, is there any component of these MVC frameworks that brings this functionality and can be used stand-alone without the full-stack framework?
Share Improve this question edited Sep 3, 2012 at 16:06 Alejandro García Iglesias asked Apr 24, 2012 at 16:44 Alejandro García IglesiasAlejandro García Iglesias 16.4k11 gold badges52 silver badges65 bronze badges 6- This is on the front page of Handlebars handlebarsjs.com – MilkyWayJoe Commented Apr 24, 2012 at 16:49
- 4 I've read it, can you please point where it says how templates update automatically when values change? – Alejandro García Iglesias Commented Apr 24, 2012 at 16:56
- I am sorry. I thought you're asking how to bind your data to Handlebars' templates. You do need something to add observables to your code such as MVC framework. If you don't want to have the full framework implementation, try this codeproject.com/Articles/13914/…, you can create your own with a very tiny code (not as good) – MilkyWayJoe Commented Apr 24, 2012 at 17:10
- 1 It seems that adding observable still I have to call the template manually to update the DOM. Thanks anyway! – Alejandro García Iglesias Commented Apr 24, 2012 at 17:50
- @GarciaWebDev Hola Garcia! hey did u find any solution to this problems? cause Im at the same situation. I want to update a handlebar-template (data-grid), adding new items...but it creates problems with my arrays... – YoniGeek Commented May 23, 2013 at 12:58
2 Answers
Reset to default 11Take a look at rivets: https://github.com/mikeric/rivets. I use backbone, handlebars, and backbone.modelbinding for two-way updates. Works great.
Backbone.modelbinding (https://github.com/derickbailey/backbone.modelbinding) has been abandoned, but refers to rivets.
It sounds like you might just want to try using a Backbone view to render your Handlebars template and listen to jQuery events on elements "inside" the view. You can use Backbone views without having to use the framework's Models, Collections or the Router, but you still have to include the full Backbone library (6.3kb, Packed and gzipped) and Underscore, which might be a problem for you if size is a consideration.