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

Splitting a view into subviews

In the previous recipe, we used a single big view to render the collection. However, there is a better way to handle big views, by splitting them into multiple small views. Such a practice should have several advantages. In the context of our collection, the following advantages are observed:

The ability to insert, delete, or update a model in a collection without the need to re-render the whole collection
The ability to re-use subviews in other places of the program
The ability to split a single big piece of code into small and simple parts

In this recipe, we are going to split a view which renders a collection into several simple subviews. Let's output the data in a table rather than in a list and apply some Cascading Style Sheets (CSS) to make it look better.

How to do it...

Follow the given steps to split one big view into small subviews.

Make sure you have the model and the collection definition:

  var InvoiceItemModel = Backbone.Model.extend({

  });
  var InvoiceItemCollection...

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

Splitting a view into subviews

How to do it...