Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to bind data on a Handlebars.js template for automatic value update?

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?

like image 283
Alejandro García Iglesias Avatar asked Apr 24 '12 16:04

Alejandro García Iglesias


People also ask

How do you bind data in JavaScript?

Data binding in concept is quite simple. On one side, you have a data model and on the other side, you have an interface, often called a view. The idea is that you want to “bind” some piece of data to something on the view so that when the data changes, the view changes. This is typical for read-only data.

How do you write JavaScript codes in Handlebars?

Handlebars doesn't allow you to write JavaScript directly within templates. Instead, it gives you helpers. These are JavaScript functions that you can call from your templates, and help you reuse code and create complex templates. To call a helper, just use it as an expression - {{helpername}} .

How do I use Handlebars in node JS?

HandleBars can be used to render web pages to the client side from data on the server-side. To use handlebars in express, we need to store HTML code into a . hbs extension in the 'views' folder in the source directory as hbs looks for the pages in the views folder. Now, we need to change the default view engine.

How do I compile Handlebars templates?

Getting started Go to https://nodejs.org/en/download/ to find out how to do that on your OS. Next, install the Handlebars npm package, which contains the precompiler. Create a file name example.


1 Answers

Take 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.

like image 96
bigspotteddog Avatar answered Oct 16 '22 04:10

bigspotteddog