Backbone.js Tutorial - Beginners
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.