Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Backbone.js Patterns and Best Practices
Backbone.js Patterns and Best Practices

Backbone.js Patterns and Best Practices: Improve your Backbone.js skills with this step-by-step guide to patterns and best practice. It will help you reduce boilerplate in your code and provide plenty of open source plugin solutions to common problems along the way.

eBook
$22.99 $25.99
Paperback
$43.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

Backbone.js Patterns and Best Practices

Chapter 2. Working with Views

Backbone view works as the presentation layer of an application. In simple terms, you can define it as an abstract layer for your HTML element. It doesn't contain any HTML markup of its own, but it contains the logic to present your model's data with the help of JavaScript templates.

If you go through the annotated source of Backbone view, you will find that Backbone.View is a small class with very few methods, including an empty initialize() method and an almost empty render() method, which are in general meant to be overridden by any custom view class. In this chapter, we will investigate some common problems and the solutions to these problems with respect to the Backbone views that developers face mostly while developing real-world Backbone.js applications.

The basic issues with Backbone are associated with view rendering or updating and maintaining multiple views within an application. We will analyze the following topics based on complexity:

  • Basic usage...

Basic usage of views


Backbone views are the tools that provide a logical structure to the HTML markup of your application. Views represent the data of Backbone models or collections via JavaScript templates. For any change in the associated model or collection, you do not need to redraw the complete page, only update the relevant view—that's it. A basic view can be defined this way:

var UserView = Backbone.View.extend({
  render: function () {
    var html = "Backbone.js rocks!";
    this.$el.html(html);
    return this;
  }
});

// create an instance
var userView = new UserView();
$('#container').append(userView.render().el);

Here we created a simple HTML markup, placed it inside this view's element, and showed the view in the DOM. Let's understand the concept further by looking at all the steps.

Understanding the el property

What is the this.$el property? It is the property that points to the jQuery-wrapped version of el. Every view possesses an el property that either holds a DOM reference...

Partially updating a view


Partial view updating is a common feature request that many developers ask for. The requirement is to re-render part of a view without rendering the complete view. This is pretty significant, mostly when there is a complex view with lots of data and only a small portion needs to be altered. Re-rendering the complete view for every small change can be a performance hit. The solution to this, on the other hand, is quite simple. In the following example, if the address attribute changes, then only the address part of the view's DOM will be updated, and the complete view will not be re-rendered:

...

template : _.template('<p><% name %></p><p><%= address %></p>'),

initialize: function() {
  this.listenTo(this.model, 'change:address', this.showChangedAddress);
},

showChangedAddress: function () {
  // we are using the same main view template here though 
  // another subtemplate for only the address part can 
  // anyway be used here...

Understanding nested views


A nested view or subview is basically a child view. The necessity of a subview arises when we have a complex view and we want to separate a part of it for the sake of simplicity, better event-handling, and a better model-view relationship.

To give you an example, assume that we have a collection of similar data and we need to display a list item for each type of data. In this case, it is always preferable to have separate views and models that give an option to control the behavior of the view attached to each model. When you click on an item, you may need to use the data for that item for further processing. If the item is a subview, we can get the data readily from the model attached to it. We will explain this concept in the example that follows.

We have seen UserItemView in Chapter 1, Reducing Boilerplate with Plugin Development, which uses the User model. Now, let's introduce a collection of user data that will be displayed as a list:

var User = Backbone.Model...

Working with templates


Templates are an integral part of Backbone application development. With Backbone, Underscore.js comes up with its inbuilt micro template engine, though we can use other popular template engines such as Handlebars, Mustache, or Jade too. In the following section, we will cover some interesting patterns with templates that will help you to manage the templates in large applications and enhance their performance.

Storing templates in an HTML file

In the simplest of cases, we store templates in two ways; we either directly add them inline within the view as a view property or add them inside the script tag in the index.html file. We have already seen the former case in the previous example. Let's see the second option:

<script type="text/template" id="tpl_user_details">
  <h3> <%= name %> </h3>
  <p><%= about %></p>
</script>

Here we just place the template string inside a script tag and give it a type text/template so that...

Understanding automatic model-view data binding


Whenever an attribute of the attached model changes, we refresh the view to display the updated data. A change event listener is attached to the model inside the initialize() method of the view as follows:

this.listenTo(this.model, 'change', this.render);

However, there are options that can handle this data binding automatically and you do not need to take care of it for every model-view relationship. This principle is more aligned towards the MVVM design pattern than the Backbone's MV* pattern, and you will find it in frameworks such as Knockout.js and Meteor.js.

For Backbone, there are multiple plugins such as Backbone.Stickit (http://nytimes.github.io/backbone.stickit/), Backbone.ModelBinder (https://github.com/theironcook/Backbone.ModelBinder), and Rivets.js (http://www.rivetsjs.com/). These plugins provide a similar data binding feature. We are not going to discuss each plugin here; however, the implementation process is simple and similar...

Using Marionette's ItemView, CollectionView, and CompositeView


Marionette (http://marionettejs.com/) is a composite application library for Backbone.js. Developed by Derick Bailey, it is a collection of common patterns and solutions to Backbone problems. It is a great library and lots of developers use it for their Backbone-based applications.

One important thing about Marionette is that it offers several separate packages for views, regions, and so on, and allows you to use any of them freely without requiring the complete library. In this section, we will explore Marionette's ItemView, the CollectionView, and the CompositeView functionalities. These views solve a number of problems we discussed in the previous sections.

ItemView

ItemView represents a single view for an item, it can be a model view or a collection view. It extends the Marionette.View class, which is a core view with a number of reusable functions. Marionette.View takes care of triggering, delegating, and undelegating events...

Using Layout Manager


When you work with multiple views in an application, it often becomes difficult to manage activities such as multiple view rendering, adding animation to an element, or replacing a view with another view. Let's look into a great extension, LayoutManager (https://github.com/tbranyen/backbone.layoutmanager), which provides a logical foundation to assemble layouts and views within the application.

Marionette too provides a similar functionality with its RegionManager, but we chose to discuss the LayoutManager plugin here because not everyone uses Marionette and this plugin can work independently with your Backbone app. If you are already using Marionette, I advise you to verify whether RegionManager solves your needs or not. Alternatively, you can use the LayoutManager plugin along with Marionette.

The LayoutManager extension provides solutions to a number of pain points such as:

  • It handles asynchronous rendering of views if you are planning to dynamically load your templates...

Summary


In this chapter, we have gone through a number of important problems most Backbone developers come across, and learned multiple solutions to solve them. First, we discussed the partial view rendering and nested views. Any Backbone application needs to deal with nested views and if we can maintain their initialization, DOM reflow, and cleanup properly, it will greatly enhance the performance of the whole application.

We spoke about different template-handling methods, saw a number of solutions to load precompiled templates from external files, organized templates within applications, and understood how helper functions can eliminate evaluation of JavaScript codes inside templates and help us to create cleaner templates.

Finally, we learned about some of the very important extensions: Marionette's ItemView, CollectionView, CompositeView, and LayoutManager. All of these extensions provide great flexibility by taking out a lot of boilerplate code and managing your views by a great deal...

Left arrow icon Right arrow icon

What you will learn

  • Develop custom plugins and mixins to reduce boilerplate in your code
  • Learn about Backbone view management with nested views, subviews, layout manager, and Marionette views
  • Understand template management by storing and precompiling templates
  • Explore model validation with validation plugins and learn model serialization and relational data management with nested models
  • Work with collections to implement multiple sorting and filtering behavior
  • Create solid application architecture with AMD and different popular design patterns
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Last updated date : Feb 11, 2025
Publication date : Jan 24, 2014
Length: 174 pages
Edition :
Language : English
ISBN-13 : 9781783283576
Category :
Languages :

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Last updated date : Feb 11, 2025
Publication date : Jan 24, 2014
Length: 174 pages
Edition :
Language : English
ISBN-13 : 9781783283576
Category :
Languages :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 87.98
Backbone.js Patterns and Best Practices
$43.99
Backbone.js Testing
$43.99
Total $ 87.98 Stars icon

Table of Contents

8 Chapters
Reducing Boilerplate with Plugin Development Chevron down icon Chevron up icon
Working with Views Chevron down icon Chevron up icon
Working with Models Chevron down icon Chevron up icon
Working with Collections Chevron down icon Chevron up icon
Routing Best Practices and Subrouting Chevron down icon Chevron up icon
Working with Events, Sync, and Storage Chevron down icon Chevron up icon
Organizing Backbone Applications – Structure, Optimize, and Deploy Chevron down icon Chevron up icon
Unit Test, Stub, Spy, and Mock Your App Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3
(9 Ratings)
5 star 44.4%
4 star 44.4%
3 star 11.1%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by




Sean Dec 19, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
great book, love it... and LOVE backbone... I think the industry is going in the WRONG direction... mixing presentation and logic (i.e: Angular, React...) true OOP would love backbone...
Amazon Verified review Amazon
Mark Erikson Feb 06, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(Disclaimer: I was given a free copy of the PDF version to review by the publisher.)Backbone.js has become one of the most popular and widely used Javascript MVC frameworks. However, Backbone has a fairly minimalistic "building block"-type design, and does not provide much guidance on usage or higher-level application structure. As a result, most developers find themselves writing fairly repetitive code for things like template rendering, trying to factor out that code into some sort of reusable base, and having to sort out how to structure their application."Backbone.js Patterns and Best Practices" provides examples of typical usage, patterns, and concepts for each of the major pieces of Backbone (Views, Models, Collections, Routers, and Events/Storage). It also includes a quick overview of Backbone, Underscore, and Javascript mixins, as well as chapters on organizing your project code with Require.js and testing it with QUnit/Sinon.js. Finally, it includes three appendices: a list of useful Backbone references, tutorials, and plugins; rendering templates on the server; and loading templates using Require.js plugins.I was very impressed with this book. I've spent the last year working on a Backbone application, and have spent a lot of time using and learning about Backbone. This book does an excellent job of demonstrating common use cases, boilerplate patterns, and typical issues that Backbone developers encounter. It also mentions a number of major Backbone plugins, such as Marionette, BB.Relational, and LayoutManager, and gives some examples of why they are useful and how to use them. The reference section is very well chosen, and I recognize a good number of the links from my own research.I did have some occasional nitpicks with the wording and editing in the text, but nothing serious (I spent a few years as an English teacher outside the US, so that sort of thing sticks out to me probably more than it would most others.) Other than that, the topics and examples are good, and the explanations are solid.Overall, I highly recommend this book for anyone who's looking to get into Backbone development. It's not going to be your reference manual, but it does a great job of hitting important points with an appropriate amount of detail, and giving you pointers to more detailed information elsewhere.
Amazon Verified review Amazon
sessan Jan 29, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
内容自体も使いやすいのですが、個人的にはKindleフォーマットなので、スマホでも読みやすくて布団の中で勉強が進められて良かったです(笑)。しかも、ページフリップ機能にも対応しているので、検索姓も高くすばらしいです。日本の技術書の出版社も見習ってほしいです。
Amazon Verified review Amazon
d33p Mar 20, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
J'ai acheté ce livre en même temps que Backbone.js Cookbook, et l'ai lu à la suite de ce dernier.Il apporte un bon complément sur le framework.
Amazon Verified review Amazon
Joe Zimmerman Mar 11, 2014
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
This book is not for developers who are new to Backbone... at least that's what the author of the book says. For the most part this is true, but the author often spends a little too much time on things that I would consider very basic Backbone knowledge. He definitely doesn't provide an introduction to Backbone, so if you've never used Backbone before, you'd have no idea what was going on most of the time.This book does cover a lot of patterns and best practices that practically every Backbone developer should be aware of, and often points readers to Backbone plugins as solutions for some of the issues that these best practices help prevent. While I have nothing against pointing people to readily-available solutions (why reinvent the wheel, right?), I was looking forward to some more examples of hand-coded solutions in the book so that developers end up having a better understanding of what is going on.Finally, *Backbone.js Patterns and Best Practices* certainly does provide introductions to many intermediate and advanced topics related to developing applications with Backbone, but he rarely does much more than an introduction. He either drops a plugin/library on you (as mentioned) or his examples just don't dive deep enough or provide large enough examples to truly grasp the concepts (and this is coming from a guy who already understood the concepts). I think the one thing that really got the attention that it truly deserved was unit testing and even that had potential to be better.Overall, it was a good book, but certainly not great, and it didn't provide as much as I felt the title proclaimed (but people obviously don't read the same things into titles as me). I expected more advanced material, but this provided what I would consider to be mostly intermediate help for Backbone developers.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
Modal Close icon
Modal Close icon