ft-interactive/backbone-handlebars

Name: backbone-handlebars

Owner: FT Interactive News

Description: Mixing Backbone and Handlebars

Created: 2013-05-22 13:08:29.0

Updated: 2013-05-22 19:32:29.0

Pushed: 2013-05-22 13:28:09.0

Homepage: null

Size: 275

Language: CoffeeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Backbone.Handlebars

Extension for better integration between Backbone.js and Handlebars.js.

Features

Backbone.View#renderTemplate

PostView = Backbone.View.extend({
mplate: Handlebars.compile('<h1>{{title}}</h1><p>{{text}}</p>'),
nder: function() {
return this.renderTemplate(model);



 = new PostView({model: {title: 'Title', text: 'Text'}});
ody').append(view.render().el);

This will just render:

>
1>Title</h1>
>Text</p>
v>

Or you can just use the new `render` method:

PostView = Backbone.View.extend({
mplate: Handlebars.compile('<h1>{{title}}</h1><p>{{text}}</p>'),
mplateData: function() {
return model;



 = new PostView({model: {title: 'Title', text: 'Text'}});
ody').append(view.render().el);

The method `templateData` provides data that will be passed to the template for rendering.

You can also pass templateData directly as an object:

PostView = Backbone.View.extend({
mplate: Handlebars.compile('<h1>{{title}}</h1><p>{{text}}</p>'),
mplateData: {
title: 'Title',
text: 'Text'



ody').append(new PostView.render().el);

{{view}} helper

The real deal about using `renderTemplate` is that you can declare and render sub-views in your templates:

PurchaseButton = Backbone.View.extend({
gName: 'button',
ents: {
'click': 'purchaseProduct'

rchaseProduct: function() {
// some code here

nder: function() {
this.$el.html('Purchase');



ProductView = Backbone.View.extend({
mplate: Handlebars.compile('<h1>{{title}}</h1><p>Price: {{price}}</p>{{view "PurchaseButton"}}'),
nder: function() {
this.renderTemplate(this.model);



view = new ProductView({model: {title: "Product", price: "$0.99"}});
ody').append(view.render().el);

This will just render:

>
1>Product</h1>
>Price $0.99</p>
utton>Purchase</button>
v>

The cool thing is that, `PurchaseButton's ``purchaseProduct` method will be call when thebutton`` is clicked. Because `{{view}}` keeps the event-bindings of the view it rendered.

{{view}} features:

Nested view names.

his will render the app.views.PostView
ew "app.views.PostView"}}

Passing parameters to the view:

ew "PostView" model=post tagName="article"}}
ame as
 = new PostView({model: post, tagName: 'article'});
.render()

Overwriting existing view template:

ith given view
ProductView = Backbone.View.extends({
mpalte: Handlebars.template('...not...important...now...'),
nder: function() {
this.renderTemplate();

iew "ProductView"}}
is will be rendered by the renderTemplate of ProductView
iew}}

This is equivalent of you writing:

view = new ProductView();
.template = Handlebars.compile('This will be rendered by the renderTemplate of ProductView');
.render();

Notes: you will have to use `renderTemplate` in your view for this to work.

{{views}} helper

In a lot of cases you need to render more than one view. In those cases you can use the `{{views}}` helper:

NumberView = Backbone.extend({
nder: function() {
this.$el.html(this.model);



NumberListsView = Backbone.extend({
mplate: Handlebars.compile("<ul>{{views NumberView models tagName}}</ul>"),
nder: function() {
this.renderTemplate({models: [1,2,3,4,5]});



view = new NumberListsView();
.render();

result in:

i>1</li>
i>2</li>
i>3</li>
i>4</li>
i>5</li>
>

The `{{views}}helper have the same features as the ``{{view}}``` helper.

Backbone.View#renderedSubViews

If you need to access the rendered sub-views you can do it by calling `renderedSubViews` methods.

view = new Backbone.View.extend({
mplate: Handlebars.compile('{{view SubView}}{{view SubView}}'),
nder: function() {
this.renderTemplate();



.render();
.renderedSubViews(); // returns two instances of SubView

Bonus feature: killing ghost views

If you have a view which had rendered several sub-views via `{{view}}helpers. When you remove the parent view ``Backbone.Handlebars``` will also remove and clear all references to the sub-views.

view = new Backbone.View.extend({
mplate: Handlebars.compile('{{view SubView}}'),
nder: function() {
this.renderTemplate();



.render();
.remove(); // this will also call the SubView#remove method

Installing

Just copy `lib/backone_handlebars.jsinto your project. Or if you are using [CoffeeScript](http://http://coffeescript.org/) you can use directly - ``src/backbone_handlebars.coffee```.

Requirements

bone.js - 0.9.2+
lebars - 1.0.beta.6+

Running the tests

Just open - `test/runner.html`

Contributing

Every fresh idea and contribution will be highly appreciated.

If you are making changes please do so in the `coffee` files. And then compile them with:

 build

License

MIT License.