Backbone.js Tutorial - Beginners

Ajax Davis · 308K views · 2013 · 1:06:48

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users cite it as the tutorial they were following when they ask about Backbone fetch, Underscore template, routing, and cross-origin errors that came up while coding along.

Recommended by 2 people across 2 different months, 2013 to 2015.

What it is

A 66-minute beginner tutorial by Thomas Davis (Ajax Davis channel) that builds a small user-manager app in Backbone.js from scratch on a single page. It covers models, collections, views, routers and Underscore templates against a simple RESTful API, using diagrams and an accompanying README.

What people said

Recommends Andrius · 2013-10 · Stack Overflow · on “Backbone.js - ncaught exception: SyntaxError: Function constructor: failed to compile function”

I'm following this tutorial - [this video] And I stuck at this part (video starts after the part I start getting the error): [this video] As I see in the error it has something to do with underscore.js template. Uncaught exception: SyntaxError: Function constructor: failed to compile function Error thrown at line 637, column 3 in <anonymous function: T.template>(e, t, n) in [LINK] throw u.source = s, u called from line 57, column 12 in <anonymous function: success>() in file://localhost/home/andrius/dev/backbone/beginner/index.html: var template = _.template($('#user-list-template').html(), {users: users.models}) ; called from line 442, column 4 in <anonymous function: a.success>(d, e, f) in [LINK] c

Recommends Michael Joseph Aubry · 2013-11 · Stack Overflow · on “Getting data using RESTful and backbone.js”

I've been reading tons of tutorials, I really like this technology, but I am missing something. Following this tutorial [this video] you get JSON data from this url, [LINK] then you set your model, and collection. I am not sure how to set this url on my own (for either local storage or database storage), I obviously need to set it to where I can GET the data or PUT/POST/DELETE data. I need to mention that I dont want to use PHP to send the data to the database, because this is a cordova app. Maybe setting data is beyond just using a URL, hopefully some one can make this clear, this should be easy points for most. I am missing something easy here, because there is a reason they are not covering th

Cites Aessandro · 2013-10 · Stack Overflow · on “Backbone validation on existing tutorial”

I did the following tutorial by Thomas Davis and I have decided to add some validation to the age field. I have tried to edit the Model as follows but no success: var User = Backbone.Model.extend({ validate: function(attr, error) { if(attr.age < 18) { console.log(error); return error; } }, checkValidation: function(){ if (validate) { console.log('validation successful'); } else { urlRoot: '/users' } } }); Full code here [LINK] Tutorial: [this video]

Cites noclist · 2013-11 · Stack Overflow · on “Backbone.js Collection URL - 404 Not Found”

I'm following the beginner Backbone.js tutorial video by Thomas Davis on youtube ( [this video] ) I run into an issue recreating his first collection, the users collection. var Users = Backbone.Collection.extend({ url: '/users' }); I have a div with a class of "page in the html markup, of which the html should contain "Test Content" on success of fetching an instance of Users: var UserList = Backbone.View.extend({ el: '.page', render: function () { var users = new Users(); users.fetch({ success: function () { this.$el.html('Test Content'); } }) } }); I'm working in the "backbone" directory on a server (eg: work.mysite.local/backbone) I'm having trouble understanding what my collection URL should

Cites ionox0 · 2014-01 · Stack Overflow · on “What is a cross-origin request and how do I get around them?”

I've been trying to follow along with this video about making a UserManager App with Backbone.js, Node.js, Redis, Express, Nohm, Ajax, and a ton new terms that I'm still getting used to. [this video] However the link in the video takes me to a nearly blank page and the Chrome console gives the message: XMLHttpRequest cannot load [LINK] The request was redirected to ' [LINK] ', which is disallowed for cross-origin requests that require preflight. I suspect that this has something to do with the "Ajax prefilter" variable in the index.html file. Does everyone get this error? Why can't I see the app that is supposed to show up on this page?

Cites Art of FITZ · 2014-02 · Stack Overflow · on “Backbone.js Backbonetutorials.com unable to console.log serializeObject”

I have been going through Thomas Davis's [LINK] His video can be found here: [this video] Between 31-44 minutes he is explaining how to post and push to the server. He walks through different steps to test that the java/backbone code is working using alert and console.log. I have spent a while trying to figure out what I have mistaken in my code that will not perform a alert or a console.log I had re-written the code up to this point twice now and have been able to create console.log's from previous points in the video. However, now I am stuck and unable to finish this tut. Here is console.log being used to test code (35 min) var EditUser = Backbone.View.extend ({ el: '.page', render: function ()

Cites Glenn Curtis · 2014-04 · Stack Overflow · on “My Underscore template does not load / display all the model data, but does have access to it?”

UPDATE 2 I got it to work, for a fix I did just change my var name, but now I JSON encode it and it all seems to work fine. Thanks Glenn. UPDATE This sort of works now thanks to your post, but like I say in my comment I can only output my data when I console.log my data? So this works, <script type="text/template" id="Template"> <% _.each(MyXX, function(MyXX) { %> <%= console.log(MyXX.get('title')) %> <%= console.log(MyXX.get('path')) %> <%= console.log(MyXX.get('level')) %> <% }); %> </script> But when I do this, <script type="text/template" id="Template"> <% _.each(MyXX, function(MyXX) { %> <div> <%= MyXX.get('title') %> </div> <div> <%= MyXX.get('path') %> </div> <div> <%= MyXX.get('level

Cites Camauu · 2014-05 · Stack Overflow · on “Good practice, javascript blocks”

I found Backbone.js [LINK] i think its the right way to don't write the javascript blocks inside each retrieved html. In case you come across with the same doubt, im following this tutorial as introduction [LINK]

Cites Zdeněk Randa · 2014-08 · Stack Overflow · on “I can't get into Backbone events method”

Hi, Im new to Backbone.js and I've just started a tutorial video on [this video] . The idea of the tutorial is simple - to write the exact code from the beggining and learn the basics. Im using jquery 1.8.2, backbone 0.9.2 and underscore 1.4.2 The problem starts when I stucked at calling custom method saveUser from basic submit event here: // Create new user var EditUser = Backbone.View.extend({ el: '.page', render: function() { var template = _.template($('#edit-user-template').html(), {}); this.$el.html(template); }, events: { 'submit .edit-user-form': 'saveUser' }, saveUser: function() { alert('PLEASE SHOW UP'); } }) The point is it that method saveUser will not call its function, doesnt matte

Cites Rafael Mora · 2014-09 · Stack Overflow · on “Best way to make a Backbone app with RESTful Slim Framework”

I'm using this video-example ( [this video] ) in order to make an errors reporting app. The problem comes when in the View when it passes the object that comes from the REST-AJAX call, _.template says that errores is not defined. Here is my code: var Error = Backbone.Model.extend({ defaults: { iderror: '', title: '', url: '' }, idAttribute: 'iderror' }); var Errores = Backbone.Collection.extend({ model: Error, url: '/errores' }); var ErrorList = Backbone.View.extend({ el: '.page', render: function (eventName) { var that = this; var errores = new Errores(); errores.fetch({ success: function (errores) { var template = _.template($('#error-list-template').html(),{errores: errores.models}); that.$el.