Backbone.js Cookbook

Backbone.js Cookbook

By : Vadim Mirgorod

Buy this Book

Backbone.js Cookbook

By: Vadim Mirgorod

Buy this Book

Overview of this book

There is no doubt that the superior rendering power of HTML5, thin-to-thick client transition and REST style communication created a new era in web development, replacing the outdated approach based on browser plugin technologies. Backbone.js allows developers to write lightweight, modular, and scalable JavaScript applications. Backbone.js Cookbook contains a series of recipes that provide practical, step-by-step solutions to the problems that may occur during frontend application development using an MVC pattern. You will learn how to build Backbone applications utilizing the power of popular Backbone extensions and integrating your app with different third party libraries. You will also learn how to fulfill the requirements of the most challenging tasks. The first chapter of the book introduces you to the MVC paradigm and teaches you how to architect rich Internet applications operating with basic concepts of Backbone.js. During the reading of this book you will learn how to solve challenging problems leveraging Backbone objects such as models, collections, views, routers, and so on. You learn how to use forms, layouts, templating engines, and other Backbone extensions, which will help you to complete specific features of your application. You will understand how to bind a model to a DOM element. You will see how perfectly Backbone.js integrates with third party libraries and frameworks such as jQuery, Zepto, Underscore.js, Require.js, Mustache.js, Twitter Bootstrap, jQueryMobile, PhoneGap and many others. This book will guide you in how to optimize and test your applications, create your own Backbone extensions, and share them with the open source community. With the help of Backbone.js Cookbook, you will learn everything you need to know to create outstanding rich Internet applications using the JavaScript programming language.

Backbone.js Cookbook

Credits

About the Author

Acknowledgement

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Understanding Backbone

Introduction

Designing an application with the MVC pattern

Defining business logic with models and collections

Modeling an application's behavior with views and a router

Creating an application structure from scratch

Writing your first Backbone application

Implementing URL routing in your application

Extending an application with plugins

Contributing to the Backbone project

Models

Introduction

Creating a model

Operating with model attributes

Operating with the model identifier

Validating model attributes

Overriding getters and setters

Creating undo points to store/restore a model's state

Implementing workflow for a model

Using advanced validation in a model

Validating an HTML form

Working with nested attributes in a model

Implementing a one-to-one relationship

Collections

Introduction

Creating a collection of models

Getting a model from a collection by its index

Getting a model from a collection by its ID

Adding a model to a collection

Removing a model from a collection

Working with a collection as a stack or as a queue

Sorting a collection

Filtering models in a collection

Iterating through a collection

Chaining a collection

Running No SQL queries on a collection

Storing models of various types in the same collection

Implementing a one-to-many relationship

Views

Introduction

Rendering a view

Dealing with a view element using jQuery

Rendering a model in a view

Rendering a collection in a view

Splitting a view into subviews

Handling Document Object Model (DOM) events in a view

Switching views using Backbone.Router

Events and Bindings

Introduction

Managing events in Backbone.js

Handling events of Backbone objects

Binding a model to a view

Binding a collection to a view

Bidirectional binding with Backbone.stickit

Binding a model and a collection to a select list

Handling keyboard shortcuts in a view

Handling router events

Templates and UX sugar

Introduction

Using templates in a view

Implementing a template loader

Using Mustache templates

Defining a form

Adding validation to a form

Handling form events

Customizing a form with the Bootstrap framework

Assembling layouts with LayoutManager

Building a semantic and an easily styleable data grid

How it works...

Drawing on the HTML5 canvas

REST and Storage

Introduction

Architecting the REST API for the backend

Prototyping a RESTful backend with MongoLab

Synchronizing models and collections with a RESTful service

Building a RESTful frontend with Backbone

Using the polling technique to fetch data

Working with local storage

Special Techniques

Introduction

Using mixins with Backbone objects

Creating a Backbone.js extension with Grunt

Writing tests for a Backbone extension with QUnit

Mocking up a RESTful service with jQuery Mockjax in asynchronous tests

Developing a mobile application with jQuery Mobile

Building an iOS/Android app with PhoneGap

Organizing a project structure with Require.js

Ensuring compatibility with search engines

Avoiding memory leaks in a Backbone application

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Binding a model to a view

One of the useful features in Backbone.js is the ability to bind model changes to a view, thus a view is re-rendered every time a model is changed. It allows you to write less code and makes your application work like an AJAX app, for example, when new data is fetched from a REST server, the user sees the update immediately.

Let's take an example of the Rendering a model in a view recipe from Chapter 4, Views, where we rendered a model with a view and modified it, so views is re-rendered every time the model is updated.

The view which we are going to implement will be rendered as shown in the following screenshot:

In the browser console, we can modify the model values, thus the change event is triggered and the view is re-rendered.

How to do it...

Perform the following steps to bind a model to a view.

Define a new model.

  var InvoiceItemModel = Backbone.Model.extend({

  });

Define a view that renders this model.

  var InvoiceItemView = Backbone.View.extend({
    
    ...

Backbone.js Cookbook

By : Vadim Mirgorod

Backbone.js Cookbook

By: Vadim Mirgorod

Overview of this book

Related Content you might be interested in

Current Title:

Backbone.js Cookbook

Binding a model to a view

How to do it...