thomasdavis / backbonetutorials

As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial.

Backbone Tutorials

This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.

About Backbone Tutorials:

As single page apps and large scale javascript applications become more prominent on the web, useful resources for those developers who are jumping the ship are crucial.

I started this site to not only consolidate my understanding of backbone.js, but to also document what I have learned thus far for myself and others.

Thomas Davis - @neutralthoughts - Twitter

Contributions

• Thanks to Cactus(https://github.com/cactus) for creating the blog feed
• Thanks to Wes Bos (https://github.com/wesbos) for CSS fixes
• Thanks to Paul Irish (https://github.com/paulirish) for tutorial clarification

About the author

Contact:

• @neutralthoughts on twitter
• GitHub - https://github.com/thomasdavis
• [email protected]

Projects:

• JavaScript Library CDN - http://cdnjs.com
• Backbone.js Tutorials - http://backbonetutorials.com
• Proposal Generation Start up - http://protosal.com
• Technical Blog - http://thomasdavis.github.com
• Quora - http://www.quora.com/Thomas-Davis
• StackOverflow - http://stackoverflow.com/users/580675/thomas-davis

Love you mum!

backbonetutorials's Issues

JQuery doesn't see .html() for script tags in Safari 7.0.2

I am using JQuery 2.1.0... just thought I would mention that the beginner example wasn't working for the New/Edit buttons because the .html() was coming back undefined in Safari.

When I switched to .contents(), it worked. Haven't done a full browser compat test yet, but thought this might be of use.

Depreciated jquery

Great tut, I have been taking some time working through the video and at 31 min the addition of the New User button is completed. When you reload the page the console log reads:
'''
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
'''
In the tut, the jQuery that is used is this one.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

I loaded:

//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js

and the issue is resolved.

Hope that this helps someone else that is following along. And keep up the exceptional work.

There was an error converting '_posts/2011-01-26-what-is-a-collection.md/#excerpt'.

Generating... Conversion error: There was an error converting '_posts/2011-01-26-what-is-a-collection.md/#excerpt'.
error: wrong number of arguments (1 for 0). Use --trace to view backtrace

Deprecation message after jekyll serve

Hi there.

After:

jekyll serve

I get:

Deprecation: The 'pygments' configuration option has been renamed to 'hig
hlighter'. Please update your config file accordingly. The allowed values are 'r
ouge', 'pygments' or null.
            Source: D:/backbonetutorials-gh-pages
       Destination: D:/backbonetutorials-gh-pages/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
     Build Warning: Layout 'nil' requested in atom.xml does not exist.
     Build Warning: Layout 'nil' requested in rss.xml does not exist.
                    done in 0.612 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'D:/backbonetutorials-gh-pages'
Configuration file: D:/backbonetutorials-gh-pages/_config.yml
       Deprecation: The 'pygments' configuration option has been renamed to 'hig
hlighter'. Please update your config file accordingly. The allowed values are 'r
ouge', 'pygments' or null.
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

To fix it, I edited _config.yml to:

markdown: redcarpet
highlighter: pygments
permalink: /:title

Environment:

Windows 8.1 [x64]
ruby 2.2.3p173 (2015-08-18 revision 51636) [x64-mingw32]
jekyll 3.1.3

HTH.

Routing in modular-backbone example

In modular-backbone example hosted in
http://backbonetutorials.com/examples/modular-backbone , I got some routing problem.

Reproduction step :
click "contributors" link , and after click 'Projects' link without waiting for contributors page.

problem :
URL shows "http://backbonetutorials.com/examples/modular-backbone/#/projects"
but contributors is opened.

Backbonejs tutorial

Hi ,

today i installed postman addon and tried (http://backbonejs.beginner.herokuapp.com/users) to fetch the same value which you showed up in backbonejs beginner tutorial but it says no such app.

could you please tell me what am i missing here

modular-backbone

Hi Thom,

I read your post and its great :) i did this one before but i didnt tried to continue because i dont know if i am in the right direction. Do you have a solution for modules? which it has its own router, models, collection, etc?

like:

/modules/laptops
/modules/laptops/router.js
/modules/laptops/models/model.js <-- laptop models [ ibm, dell, sony, etc... ]
/modules/laptops/templates/model_lists.html

...
...

Thanks

Kevin

Typo: Missing closing quote

http://backbonetutorials.com/organizing-backbone-using-modules/

In the code snippet below the sentence "Now we can simply depend on our collection in our view and pass it to our JavaScript template.", you are missing a closing single-quote character on this line:

'text!templates/projects/list

difference between the backbone modular tutorials

I've tried out both examples and I like different things about each one.

To me, the routes.js file is the big key stone to these tutorials.

In the original, I like how the instances of the views are created but don't like how the require works...

---

define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone ){

app_router.on('route:showProjects', function(){
  require(['views/projects/list'], function(ProjectListView) {
    // Call render on the module we loaded in via the dependency array
    // 'views/projects/list'
    var projectListView = new ProjectListView();
    projectListView.render();
  })
});

---

but in the updated routes.js example -- although much less code, I don't like how the view looks like a singleton - I can't see how it's created except that I see it being passed in through the define

---

define([
'jquery',
'underscore',
'backbone',
'views/home/main',
'views/projects/list',
'views/users/list'

], function($, _, Backbone, mainHomeView, projectListView, userListView )

showProjects: function(){
// Call render on the module we loaded in via the dependency array
// 'views/projects/list'
projectListView.render();
},

Can you comment here on this approach vs the original where you use var projectListView = new ProjectListView();

In the updated tutorial, I see that you've created amdjs version of backbone which seems like a significant move and you've explained this in your tutorial.

backbone: 'libs/backbone/backbone-optamd3-min',

My issue is why do you have 2 tutorials? looking at Git commits - I see that they were both updated 20 days ago - with no read me files, I can't tell which one to use - I mean I imagine you believe the update tutorial is the better one... right?

Wrong tutorial, missing an argument in a function...

At http://backbonetutorials.com/organizing-backbone-using-modules/

define([
'jquery',
'underscore',
'backbone',
'views/projects/list',
'views/users/list'
], function($, _, Backbone, Session, ProjectListView, UserListView){

Is wrong because the Session is not loaded.

Also in the same page: http://backbonetutorials.com/organizing-backbone-using-modules/

app_router.on('showProjects', function(){

should be

app_router.on('route:showProjects', function(){

see more here: http://stackoverflow.com/questions/14410242/backbone-router-doesnt-work-with-requirejs

Please remove references to "delete" of "var"s in examples

first, thank you for providing this great tutorial...

one small issue I found (and others on the comments) - I think some of the code example might lead people to think that the delete keyword can be used for deleting variables. but this is not the case (please see this article for explanation: http://perfectionkills.com/understanding-delete/)
to keep this a great tutorial, I would remove places where delete doesn't make sense.
if you use it for firebug cleanliness or other reason, I would explain so users won't be confused, and provide a link to the above article.

thanks again for a wonderful tutorial!

it seems jQuery is now AMD compatible

Hello Thomas,

I was taking a look at the source of jQuery 1.7 and saw that it includes code to handle the AMD specification stuff. How would the application be modified to cope with this change now?

Recommended XSS protection htmlDecode() isn't actually safe

Even though the DIV never gets attached to the DOM, some browsers will still load images and fire events. See this comment on Stackoverflow

Using a textarea instead of e a DIV is safer, see here.

add an rss/atom feed to make notification of new articles easier?

maybe something like this. (drop into atom.xml file)

---
layout: nil

---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
 <title>Backbone Tutorials</title>
 <link href="http://backbonetutorials.com/atom.xml" rel="self"/>
 <link href="http://backbonetutorials.com/"/>
 <updated>{{ site.time | date_to_xmlschema }}</updated>
 <id>http://backbonetutorials.com/</id>
 <author>
   <name>Thomas Davis</name>
   <email>[email protected]</email>
 </author>

 {% for post in site.posts limit:10 %}
 <entry>
   <title>{{ post.title }}</title>
   <link href="http://backbonetutorials.com{{ post.url }}"/>
   <updated>{{ post.date | date_to_xmlschema }}</updated>
   <id>http://backbonetutorials.com{{ post.id }}</id>
   <content type="html">{{ post.content | xml_escape }}</content>
 </entry>
 {% endfor %}
</feed>

then just add the following to the default layout.

   <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml">

Backbone infinite scroll

Hi I am trying to use your infinite scroll but it's loading the first page again and again(on scroll). Here is my collection
var TaskCollection = Backbone.Collection.extend({

        model: TaskModel,

           url: 'tasks?page=' + this.page  ,
           parse: function(resp, xhr) {
             return resp.data;
            },
          page: 1,
          });

load function from my view
loadResults: function () {
var self = this;
this.isLoading = true;
console.log(this.taskCollection.page);
this.taskCollection.fetch({
success: function (models) {
var Len = models.length;
console.log(models.models);
for (var i = 0; i < Len; i++) {

                        var taskView = new TaskView({
                            model: models.models[i]
                        });

                        self.subViews.push(taskView);

                        self.$('tbody').append(taskView.render().el);  

                    }
                     that.isLoading = false;
                }
  });  

},  
console.log(this.taskCollection.page); from loadResult gives correct page number. what am I doing wrong?? Thanks in advance

Router not working

I dont think my router is working. All I get every time is the default actions method. I duplicated it and made other views with the appropriate naming conventions and templates but they wont change to it. Here is my router.

Any thoughts?

http://pastebin.com/dMW7g3yu

Include link to a Backbone-relational tutorial?

I think it would make a great addition to include a link to http://antoviaque.org/docs/tutorials/backbone-relational-tutorial/ ? As far as I can tell, Backbone-relational is one of the most used Backbone extensions. I've had quite some requests for a tutorial, and this seems to be a very good one.

API design concepts of session

In the chapter "Cross Domain Sessions", the session API was designed as

POST /session - Login - Sets the session username and returns a csrf token for the user to use
DELETE /session - Logout - Destroys the session and regenerates a new csrf token if the user wants to re-login
GET /session - Checks Auth - Simply returns if auth is true or false, if true then also returns some session details

However, The express application declares

app.del('/session/:id', function(req, res, next) { ... })

where :id is the session.id which has been passed in cookies

Actually, the browser should have one and only one session in this site. So, the :id in this API is not necessary.

IMHO, to prevent the conflict, It's better to declare SessionModel with the attribute { url: "/session" } rather than { urlRoot: "/session" }, so that the express application can declare

app.del('/session', function(req, res, next) { ... } )

As the design document mentioned above.

backbone.js model backing DataTables grid?

It would be great to see an example of backbone.js providing the data for DataTables.

What about making git submodules for examples ?

modular-backbone-updated gives an XMLHttpRequest error

I have not played around with any of the code yet. I just opened up index.html in my browser and noticed the loading text never goes away. Looked at the console and saw this:

XMLHttpRequest cannot load file:///home/spencer/Desktop/backbonetutorials/examples/modular-backbone-updated/templates/home/main.html. Cross origin requests are only supported for HTTP.

and

Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 line7 of text.js

For each request all scripts are loaded

In the example (https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/modular-backbone) are two models (so two collections, two list views, and so on): user and project. For each request all script are loaded, users script and projects scripts. Is there any way to just load the users scripts hen the request is for user listing? Thank you.

Links - External Tutorials

What do you think about adding more external links to Backbone tutorials?

• Derick Bailey is maintaning list of Backbone Resources which contain a lot of links.
• List on Backbone Wiki
• Backbone Patterns

Access Control Expose Headers

I think the server needs res.header('Access-Control-Expose-Headers', 'X-CSRF-Token'); to work. It allows the client to read the token and use it to send the next request.

Config is Missing

example nodejs-mongodb-mongoose-restify is missing config moudle

I run command on terminal as following ~

nodejs-mongodb-mongoose-restify ➤ node server.js git:gh-pages

module.js:340
throw err;
^
Error: Cannot find module './config'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/home/lucien/yaphets/backbonetutorials/examples/nodejs-mongodb-mongoose-restify/server.js:11:14)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)

thanks

build.sh throws an error

This is my first time looking at require.js optimizer, but running ./build.sh I am getting

sed: 1: "output/index.html": invalid command code o

regardless of the example I try.

Seemingly the build completes and I can run the app, but "invalid command" always makes me itchy.

Any ideas?

Nohm Error

Not sure if I'm missing something, but if I clone the project and try to run the server using node for the video tutorial, I get:

node server.js 
{ name: 'Nohm Error',
  message: 'Warning: setClient() received a redis client that is not connected yet. Consider waiting for an established connection before setting it.' }

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Redis connection to 127.0.0.1:6379 failed - connect ECONNREFUSED
    at RedisClient.on_error (/net/iwebdev2/export/home/web/public/htdocs/staff/cohenaa/projects/video-backbone-beginner-server/node_modules/redis/index.js:189:24)
    at Socket.<anonymous> (/net/iwebdev2/export/home/web/public/htdocs/staff/cohenaa/projects/video-backbone-beginner-server/node_modules/redis/index.js:95:14)
    at Socket.EventEmitter.emit (events.js:95:17)
    at net.js:441:14
    at process._tickCallback (node.js:415:13)

I'd love to follow the tutorial without mocking up the responses. Any help is much appreciated! I did google this error and saw something on SO about calling setClient(redis), but it looks like that's already being done.

how to use a jQuery plugin?

How to add a dependency for a jQuery plugin (e.g. jQuery.tmpl) to a backbone view?

typo in a view example

Ohai,

Here in "Loading a template" http://backbonetutorials.com/what-is-a-view/ in the code example in the render function, "this.el.html" should be "this.$el.html" to refer to the jquery element.

I would have sended a pull request but I don't know how you generate your html and there is no instructions about that in the README.

Have a nice day,

about update package.json

when i try this example [nodejs-mongodb-mongoose-restify],i my machine
node -v 0.12.2 npm -v 2.7.4
that i fond sever.js & server-http.js '''path.exists''' error that it seems that node changed API.
so u can upgrade you project to fit that newest node version for fisherman.

License?

While I'm almost sure it's a permissive license like MIT or GPL, what is the license on this? Over on the require.js-rails gem, we want to set up some automated testing and forking your code would save some time in getting the test environment set up.

Not returning 'new projectsModel'

I see that every view/collection in the modular-backbone example is returning new instances of the Backbone objects except for the projectsModel. Can you please explain the reasoning behind this?

Cross-domain example additional routes/pages

It would be beneficial for me and hopefully others to see how to add additional pages that are handled by the router. Also, from the looks of the design, it appears that each page must have a login/logout function property for this to be handled correctly. Am I correct?

I was following your example (which is very good, btw), but when I got to actually starting to build with this same type of layout, I ran into the routing problem. If each page must have a login/logout function with this layout, is it possible to have the router check the session and display a different route (view) if they are not logged in? This would make each page (view) much smaller and a single call to these views (login/logout)

I apologize if I missed something.

Thank you,

Daniel Kleehammer

: ReferenceError: users is not defined

I am new in backbone i am try to implement your code for demo but i getting below error can you please tell me where i am doing mistake.

here i am attached code
Error : ReferenceError: users is not defined
_.each(users, function(user){

<title>Backbon JS</title>

User Manager

---

<script type="text/template" id="user-list-template"> ``` <% _.each(users, function(user){ %> <% }); %>

firstname	lastname	age
<%= user.get('firstname') %>	<%= user.get('lastname') %>	<%= user.get('age') %>

``` </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> <script type="text/javascript"> var Users = Backbone.Collection.extend({ url : 'http://backbone-beginner.herokuapp.com/users' }); var UserList = Backbone.View.extend({ el: '.page', render: function(){ var that = this; var users = new Users(); users.fetch({ success:function(users){ var template = _.template($('#user-list-template').html(), {users: users.model}); that.$el.html(template); } }) } }); var Router = Backbone.Router.extend({ routes: { "": "home" } }); var userList = new UserList(); var router = new Router(); router.on('route:home', function() { userList.render(); console.log("We have loaded the home page"); }); Backbone.history.start(); </script>

console log does not show up

At 15:07 min into the video tutorial that I was coding along, I go to refresh the page and get the home page for the app but I do not the console with the message 'We have loaded the home page'

I am using a Linux computer (Ubuntu 13.10).

Website not loading, lost-redirect?

I go to the website, and get a blank screen. On the console, there is an error:
Uncaught SyntaxError: Unexpected token < oldcp.dnsmadeeasy.com/lostredirect.html:1

home page suggestions

I was looking at the home page - http://backbonetutorials.com/ - for the site and had the following thoughts:

why do you need the second Home button?! it's not really needed with Backbone Tutorials button eh?

In the about blurb, you could mention how others could contribute too:

About:

Backbone Tutorials is a collection of tutorials written by Thomas Davis. Everything is open source and I try my best to keep the tutorials updated.

Though I am busy and only work on this is my spare time so manycontributors have also help me put this resource together.

If you would like to contribute a new tutorial or have feedback about anything on this site or the github (https://github.com/thomasdavis/backbonetutorials), please create an issue on the github, and label it appropriately as an Error, New Tutorial or general Request and either I (or the community) will eventually respond to it.

Instead of the advanced bucket being empty, you could move over some of the intermediate tutorials like so:

Intermediate

SEO for single page applications
Organizing your application using Modules (require.js)
Cross-domain Backbone.js with sessions using CORS

Advanced
Lightweight Infinite Scrolling using Twitter API
Real-Time Backbone With PubNub
Simple example - Node.js, Restify, MongoDb and Mongoose

You could start a list of the best backbone-related conferences:

Conferences:
http://backboneconf.com/

modular backbone example broken

Current deployment of modular backbone example is broken.

See http://backbonetutorials.com/examples/modular-backbone

Uncaught TypeError: undefined is not a function main.js:9 Uncaught TypeError: undefined is not a function list.js:12 Uncaught TypeError: undefined is not a function list.js:9 Uncaught Error: Load timeout for modules: text!templates/home/main.html text!templates/users/list.html http://requirejs.org/docs/errors.html#timeout require.js:7

what is a model amend

Hi,

the example for validate needs to be changed to this.on('invalid', ...) and the validation to be executed or tested, needs the second parameter validate to equal true, person.set({ ... }, { validate: true }

Thanks for your time!

How to choose javascript libraries based on functionality with AMD

How can we pick, say, DOM manipulation from JQuery, array utilities from YUI, UI widgets from Dojo, etc., with AMD, as mentioned in http://net.tutsplus.com/tutorials/javascript-ajax/next-generation-javascript-with-amd-and-requirejs-new-on-premium/

Uncaught ReferenceError: users not defined

I have been following along in the tutorial, but have an issue when you render real data at the 28minute mark of the tutorial - first time real data. Up to this point everything works. I know if I remove the underscore each function, the template renders with the headings. But I don't know where the issue is. I have uploaded my html page up to this point to my github account.

Any help would greatly be appreciated. Backbone and underscore n00b here.
Tony

Using other character issue

Hello, thank you for the good boilerplate that you made ​​availible for us.
But I have an issue with getting Danish letters øæå through.
Of course it is declared in my index.html, but the templates do not get this charset on.
I have downloaded a fresh copy of boilerplate and tried to throw ÆÅØ in with charset and it beats rather not go through that!