

Some of the most obvious features of Backbone.js are exposed through models, collections, and views. With its extensibility and plethora of plugins, learning Backbone.js can be used to build some amazing web applications. Especially its small and nicely annotated source code.īackbone.js provides the bare minimum required to give your web application the structure that it can benefit from. The framework may be small in size, but this is what makes it a great candidate for this thorough exploration. Although this section talks about something very obvious, when it comes to Backbone.js it is a really critical mistake to not explore the framework thoroughly.

One common mistake that beginner developers often make is that they take Backbone.js to be yet another MVC-like client framework for the web. Mistake #1: Ignoring the Arsenal of Backbone.js Functionalitiesīackbone.js may be a minimalist framework, but it (along with Underscore.js) provides a plethora of features and functionalities that can easily cover the most basic and some of the critical needs that arise when developing a modern web application. In this Backbone.js tutorial, we will take a look at some common mistakes that are often made by freelance developers taking their first stab at learning Backbone.js and ways to avoid them. But they are also flexible enough to be adapted to almost any practical use. Models and collections in Backbone.js are simple, but they come with some very useful features, such as the option to easily integrate them with REST JSON APIs. Out of the box, components of Backbone.js provide an intuitive environment that you may already be familiar with when working with models and views on the back-end.
#BACKBONE JS SET HOW TO#
We learned about the “initialize” property of the object that we pass into, as well as how to manually start the router once our setup tasks have is a minimalistic framework which aims to provide a simple set of data structures and features that you can use to create a structured web application’s front-end. In this article, we learned how to set up an initialization function for a Backbone.js router.
#BACKBONE JS SET CODE#
This is accomplished in the example code by placing all of the code that sets up the delay in the “initialize” method. What is being demonstrated here is the fact that you can execute any setup code from the “initialize” method and then start the router manually as you wish. Once the AJAX loader goes away and the message in a green box fades in, the nav links will work as expected. As long as you see that AJAX loader, none of the nav element links work. When the page loads, notice that there is an AJAX loader gif.

HERE IS WORKING CODE LINK FOR EXAMPLE # 2: The point here was to demonstrate that if you have tasks you’d like to complete before the router is started, you can safely queue them up inside of the “initialize” method. Once you see the green message fade-in, then all of the nav element clicks will work. I have set a five-second timeout that delays the router’s start (the AJAX loader gif is spinning during this timeout). This is because the router has not not been started yet. Notice that when the page loads, if you click any of the nav links, nothing happens. What interests us is the functionality that is provided here. There is no need to discuss the domSetup function in detail it simply fades-in a message and sets up a few click handlers. First, we moved all of the initialization code to the function: domSetup, just to keep the example code short and simple. In Example # 2, we’ve upgraded our initialize method a bit. NOTE: In the code examples that follow, I have removed most of the implementation code so that the example will be shorter and easier to follow.

In the object that we pass to the method, we provide an “initialize” property, which will be a method. Like much of what we have already discussed with regards to Backbone, this functionality is fairly straightforward. In this article, we will learn how to set up an initialization function that will run once, and is guaranteed to do so before the router is started. But what about setup tasks? Sometimes you may want to execute code in preparation for your routes, but these tasks need to be completed before the routes are activated. We’ve discussed setting up route handlers, specifying a default route, graceful actions for corner-cases, as well as passing parameters to routes. In the last few articles of this series, we have learned the basics of setting up routes in Backbone.js. Learn how to configure a function that initializes your Backbone.js router
