Book Image

Backbone.js Blueprints

By : Andrew Burgess
Book Image

Backbone.js Blueprints

By: Andrew Burgess

Overview of this book

<p>Backbone.js is an open source, JavaScript library that helps you to build sophisticated and structured web apps. It's important to have well-organized frontend code for easy maintenance and extendability. With the Backbone framework, you'll be able to build applications that are a breeze to manage.<br /><br />In this book, you will discover how to build seven complete web applications from scratch. You'll learn how to use all the components of the Backbone framework individually, and how to use them together to create fully featured applications. In addition, you'll also learn how Backbone thinks so you can leverage it to write the most efficient frontend JavaScript code.<br /><br />Through this book, you will learn to write good server-side JavaScript to support your frontend applications. This easy-to-follow guide is packed with projects, code, and solid explanations that will give you the confidence to write your own web applications from scratch.</p>
Table of Contents (14 chapters)
Backbone.js Blueprints
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Editing event records


The next step is to allow users to edit their event records. Wiring up our edit button will be simple. First, we listen for the click in the events object of EventView, like this:

"click .edit": "edit"

And secondly, we navigate to the edit route for that event:

edit: function (evt) {
  evt.preventDefault();
  this.nav("/edit/" + this.model.get("id"), { trigger: true });
}

We want our edit routes to act just like our create route does. If the user clicks on an edit button, a modal will fade in and allow editing of the event records. But they should also be able to go directly to the edit route and the table will load under the modal. This means that our router's edit method should be very similar to its create method.

First, we'll add the route to the router's route object as follows:

'edit/:id': 'edit'

Then, the edit method itself using the following code:

edit: function (id) {
  var ev = new EditEventView({
    model: this.events.get(parseInt(id, 10)),
    nav: this.nav
 ...