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

Building a semantic and an easily styleable data grid

In your application, you may want to output the data as a sortable, filterable, and editable grid, which is not an easy task to do from scratch. In this recipe, we will learn a quick solution for that task using Backgrid.js, a powerful extension for building data grids in Backbone applications.

In this application, we are going to create a simple grid using the Backgrid example. It will look like the following screenshot:

When a user clicks on the column header, the grid is sorted by this column.

If a user double-clicks on a specific cell, that cell is replaced by an input element, where a user can enter a new value.

Getting ready

Follow these steps to be prepared to use Backgrid extension:

Download Backgrid.js extension from its official web site at http://backgridjs.com/.
Include Backgrid.js into your project by extracting this extension into the lib/backgrid folder.
Include references to the extension files into index.html.
```
<link rel="stylesheet...
```

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

Building a semantic and an easily styleable data grid

Getting ready