Backbone Demo is a small client side web application to demonstrate how to use backbone.js
A working demo of the master branch is available. The application is wired up to an actual database, and although I don't mind you playing around to see how the application functions, please don't be a troll. Otherwise I will be forced to remove the database component and alter the behavior of the application to something different than what the code reflects.
- Single Page Application.
- Built using backbone.js
- Uses AJAX to make all server requests.
- Utilizes a RESTful server side using Slim Php.
Inspiration for this demo as well as some pieces of code were used from another backbone demo.
- Backbone.js Wine Cellar Tutorial by Christophe Coenraets
- Link removed as it appears to no longer exist on the internet.
Each branch sets a milestone for the project. Because of this design, it is possible to switch the branch on github, and download the project at any specific point in time as it was developed. It is also possible to do a comparison between branches on github to see what changed from one branch to the next. Below is a description of each branch.
Part1Html is the core starting point of the application. The basic file structure of the project is setup, as well as some boilerplate for project. For everyone who wants to build this app from the ground up, part 1 is as go a place to start as any.
Part2Util adds a utility class that is borrowed from Christophe Coenraets, and his Backbone.js Wine Cellar Tutorial. The main purpose of the util.js file is to allow the loading of the templates that will be used to insert dynamic content into the DOM.
Part3Header adds some backbone views, and a backbone router. It demonstrates the process of retriving a template, adding it to a view, and then rendering the view into the DOM. Although there is no data coming from the server side as of yet, understanding what is going on with how the router handles routes, and how the view gets created, and inserted into the DOM is a key concept that should be understood before moving on to the next part where data is added.
Part4Data fills out the getData function in the main.js. It has two parts to it. The first is using jQuery to fetch data from the server, and then diplaying it inside the content area of the page as raw JSON. The second part requires you to comment out the entire getData function in main.js, and uncomment the currently commented parts of main.js. Essentially you will be adding some lines to the list function, and replacing the uncommented portion of the getData function with the commented portion. Making these changes will not change the output, but will take advantage of the Backbone models, collections, and fetch method.
Part5Table Makes two new views that are used to turn the data portion into something nice to read. It will take the raw JSON data, and use a template, along with the two new views to put the data into a nice table in the content area.
Part6Edit adds the ability to edit the information for a specific item in the list. It does not however allow the user to update the changes they make. It only adds an editable view that will be used to allow updating. There is some restructuring that occurs in the app to ensure that the animation works properly, as well as make sure that there are no zombie views left over. Take care when working through this part to note all of the changes in all of the files that may change.
Part7Update finishes the edit and update functionality by allowing the user to save the changes that they make to an item.
The simplest way to install Backbone Demo is to clone the entire project to a web accessible directory on your webserver, or select the branch you would like to start at, and use the download as zip option to get the project at that stage.
$ git clone git@github.com:DJBarnes/backbonedemo.gitImport the .sql file located in the api directory of the master branch to your mysql database
$ mysql < pathToSql/backbonedemo.sqlChange the database credentials in the api/index.php file so that the application has access to the database:
function getConnection() {
$dbhost = "127.0.0.1";
$dbuser = "username";
$dbpass = "password";
$dbname = "backbonedemo";
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname",$dbuser,$dbpass);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbh;
}**Make sure that the ModRewrite module is on for your apache server, otherwise the .htaccess file will not do it's job, and you will have failed calls to the server for data.
By default the name of the database is:
backbonedemo
This can easily be changed if needed by following the instuctions above.
There is only one table for this demo, and the structure for it is as follows.
This demo is in no way the defacto guide on how to use backbone.js, and makes no attempt to be that. It does a great job of showing some of the key features of the framework without using very many additional libraries. Care has been taken to ensure that there are no zombie views and events running around, however because this is very much a work in progress, this demo is not perfect.
- This is the current Documentation.
- Source hosted at GitHub.