Backbone.js Wine Cellar Tutorial — Part 1: Getting Started

One of the challenges when building nontrivial Web applications is that JavaScript’s non-directive nature can initially lead to a lack of structure in your code, or in other words, a lack of… backbone. JavaScript is often written as a litany of free-hanging and unrelated blocks of code, and it doesn’t take long before it becomes hard to make sense of the logic and organization of your own code.

Backbone.js is a lightweight framework that addresses this issue by adding structure to JavaScript-heavy Web applications.

Self-contained building blocks

Backbone.js provides several classes (Model, Collection, View, Router) that you can extend to define the building blocks of your application. To build an app with Backbone.js, you first create the Models, Collections, and Views of your application. You then bring these components to life by defining a “Router” that provides the entry points of your application through a set of (deep-linkable) URLs.

With Backbone.js, your code is organized in self-contained entities (Models, Collections, Views): No more free-hanging and unrelated blocks of code.

Data Binding

With Backbone.js, you bind Views to Models so that when a Model’s data changes, all the Views bound to that Model automatically re-render. No more complex UI synchronization code.

Elegant REST Integration

Backbone.js also provides a natural / magical / elegant integration with RESTful services. If your back-end data is exposed through a pure RESTful API, retrieving (GET), creating (POST), updating (PUT), and deleting (DELETE) models is incredibly easy using the Backbone.js simple Model API.

Sample Application

In this three-part tutorial, you’ll create a Wine Cellar application. You can browse through a list of wines, as well as add, update, and delete wines.

  • In Part 1 (this post), you define the basic infrastructure. You create a “read-only” version of the application: you’ll be able to retrieve a list of wine and get the details of each wine.
  • In Part 2, you add the code to add, update and delete wines. You leverage Backbone’s powerful REST integration.
  • In Part 3, you add complete support for history management and deep linking.


NOTE: I also blogged a non-Backbone version of the application here (Java back-end) and here (PHP back-end), which you can look at for comparison.

Part 1: The Read-Only Wine Cellar Application

You can run the application (Part 1) here.

Here is the code:

// Models
window.Wine = Backbone.Model.extend();

window.WineCollection = Backbone.Collection.extend({
    model:Wine,
    url:"../api/wines"
});

// Views
window.WineListView = Backbone.View.extend({

    tagName:'ul',

    initialize:function () {
        this.model.bind("reset", this.render, this);
    },

    render:function (eventName) {
        _.each(this.model.models, function (wine) {
            $(this.el).append(new WineListItemView({model:wine}).render().el);
        }, this);
        return this;
    }

});

window.WineListItemView = Backbone.View.extend({

    tagName:"li",

    template:_.template($('#tpl-wine-list-item').html()),

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});

window.WineView = Backbone.View.extend({

    template:_.template($('#tpl-wine-details').html()),

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});

// Router
var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list",
        "wines/:id":"wineDetails"
    },

    list:function () {
        this.wineList = new WineCollection();
        this.wineListView = new WineListView({model:this.wineList});
        this.wineList.fetch();
        $('#sidebar').html(this.wineListView.render().el);
    },

    wineDetails:function (id) {
        this.wine = this.wineList.get(id);
        this.wineView = new WineView({model:this.wine});
        $('#content').html(this.wineView.render().el);
    }
});

var app = new AppRouter();
Backbone.history.start();

Code Highlights:

  1. WineModel (line 2): Notice that we don’t need to explicitly define the attributes (name, country, year, etc). You could add validation, default values, etc. More on that in Part 2.
  2. WineCollection (lines 4 to 7): “model” indicates the nature of the collection. “url” provides the endpoint for the RESTFul API. This is all that’s needed to retrieve, create, update, and delete wines with Backbone’s simple Model API.
  3. WineListView (lines 10 to 25): The render() function iterates through the collection, instantiates a WineListItemView for each wine in the collection, and adds it to the wineList.
  4. WineListItemView (lines 27 to 38): The render() function merges the model data into the “wine-list-item” template (defined in index.html). By defining a separate View for list items, you will make it easy to update (re-render) a specific list item when the backing model changes without re-rendering the entire list. More on that in Part 2.
  5. WineView (lines 40 to 49): The view responsible for displaying the wine details in the Wine form. The render() function merges the model data (a specific wine) into the “wine-details” template retrieved from index.html.
  6. AppRouter (lines 52 to 71): Provides the entry points for the application through a set of (deep-linkable) URLs. Two routes are defined: The default route (“”) displays the list of wine. The “wines/:id” route displays the details of a specific wine in the wine form. Note that in Part 1, this route is not deep-linkable. You have to start the application with the default route and then select a specific wine. In Part 3, you will make sure you can deep-link to a specific wine.

Download

The source code for this application is hosted on GitHub here. And here is a quick link to the download.

You will need the RESTful services to run this application. A PHP version (using the Slim framework) is available as part of the download.

UPDATE (1/11/2012): A version of this application with a Java back-end (using JAX-RS and Jersey) is also available on GitHub here. You can find more information on the Java version of this application here.

Part 2 is available here.

  • Just an FYI, when I click to view a wine I end up with this in the URL:

    http://www.coenraets.org/backbone-cellar/part1/#wines/11

    If I cut and paste that into a new tab, it is throwing an error and not loading the wine. (Well, in console anyway ;)

  • Ray,
    As mentioned in the post, this is the normal behavior in Part 1. Part 3 of this tutorial covers deep linking.
    Christophe

    • White Wine Glasses Related Posts:Hair Loss Help TipsSimple Methods To Help Grow Your Hair OutAdvancing Self Confidence, Appearance And Prettiness Using Hairstyles To Hide Hair LossSaw Palmetto Hair Loss TreatmentHair Loss 101Share and Enjoy: Posted in Health Wellness | Tagged hair loss, hair loss prevention, hair loss putorcds, hair loss treatment for men, laser hair loss treatment, natural hair loss treatment, new hair loss treatment

  • Doh! Helps if I read closer. :)

  • José Adenaldo Bittencourt

    Where are the adobe flex posts?

  • JCLang

    Hello Christophe,
    thanks, your blog is top quality.
    I hope you’ll focus back to Flex soon! :)

    • In your router#list function why do you initialize the view with the wine collection stored to a model attribute?
      I think it would be much better suited to the collection attribute like so:

      61| this.wineListView = new WineListView({collection:this.wineList});

  • Jeremy

    I will definitely try this one. My prefered client side implementation of those posts

  • Christophe,
    thanks for this tutorial. It would be great of Ray could add the CF backend to this :-)

    What IDE do you use or recommend for JS development?

    Regards,

    Stefan

    • Robin

      Aptana is a great IDE for front-end development. Back-end too but it supports javascript code completion very well.

  • Dimitris

    Great tutorial.
    I’ve read only Ruby on Rails RESTful services.
    php approach is great
    I am waiting for part 2.

    Dimitris
    from Thessaloniki Greece

  • Christophe Coenraets

    @jose, @JCLang… Thanks. I have a couple a Flex posts lined up. Stay tuned.

  • Christophe Coenraets

    @Stefan. Still using TextMate for now.

  • Pingback: Backbone.js Wine Cellar Tutorial — Part 2: CRUD()

  • Pingback: Backbone.js Wine Cellar Tutorial — Part 1: Getting Started | Wine Bottle Covers()

  • what if your are not using a restful service to connect?

    • Robin

      I’m curious about that too. It doesn’t seem to work without a rest service…

  • Pingback: Backbone.js Wine Cellar Tutorial — Part 1: Getting Started « lolososo()

  • Great tutorial. really helped me a lot.
    I noticed in your demo every time you choose a wine and then hit the back button you are making another call for data. any thoughts? I added code that checks for the collection b4 calling fetch. Am i missing something?

    thanks again for this great work!!!

  • Pingback: Confluence: Mobile Devices Development()

  • Hecky

    The link to the part 2 of the tutorial seems broken, ;)

  • Christophe

    @Hecky: Thanks. Fixed.

  • Pingback: Backbone.js Wine Cellar Tutorial — Part 3: Deep Linking and Application States()

  • Pingback: Using Backbone.js with a RESTful Java Back-End()

  • Seth Stone

    Thanks for the great post; I’m really enjoying the topics you’re working through. On this app I’m having a bit of trouble with the PHP. Do you happen to know if there’s a min version (of PHP) required to run this? I have 5.1.6 and I’m getting: PHP Fatal error: Uncaught exception ‘ErrorException’ with message ‘setcookie() expects at most 6 parameters, 7 given’. Also, since I’m not too interested in the server side at this point is there a way I could point the JS (served from my server) to the REST API hosted on your system?

    • Seth Stone

      In case anyone runs into the issues I did… for this to work I had to have a version of PHP higher than 5.1 (5.3.3 worked for me when 5.1.6 did not). Apache has to be configured to AllowOverride FileInfo for the api directories, as this is necessary for .htaccess files to be processed which Slim.php depends on. On RHEL also had to have the php-mysql package installed. Thanks!

      • Faz

        Thanks for the heads up Seth. Was facing this issue on the Twitter Bootstrap+Backbone tutorial and found your suggestions. Working fine now.

      • Mike

        I can not get this application to show the data. If I navigate to the api url it returns the JSON data, but the front end is not connecting. I pulled over all of the source and attached it to mysql as instructed, but either the folder needs a different .htaccess connection or there is something I am missing. I saw your note about changing the .htaccess file. Do you have more detail about how you structured it. Which folder you put the rule into? Any help would be fantastic.

        http://www.daddai.com/mie/cellar/

  • Pingback: The LiveCycle Post | Using Backbone.js with a RESTful Java Back-End()

  • Pingback: Javascript Resources[updated] « Kooljoy.com Blog()

  • Pingback: Backbone.js Lessons Learned and Improved Sample App()

  • Pingback: Sample Application with Angular.JS()

  • Pingback: Sample Mobile App with Backbone.js and PhoneGap()

  • Pingback: Christophe Coenraets On Backbone.js And PhoneGap | Hire Flash Developers()

  • Justin

    Like it and as other post indicated I really think there should be a version with CF back end.

    regards
    J

  • Pingback: Sample App with Backbone.js and Twitter Bootstrap()

  • Pingback: Good Tutorials | Wesley Duff()

  • Pingback: Robert McGhee » February 14th()

  • Pingback: Confluence: Front End Development Portal()

  • I think it is a bad idea to present an introductory tutorial like this and teach people to pollute the global namespace.

    There are better ways of handling that situation.

  • Hello,
    every time i use fetch() i need to wait for complete download of datas before doing templatinf for example.
    You seem not need to wait for asynchronous call in your example:
    this.wineList.fetch();
    $(‘#sidebar’).html(this.wineListView.render().el);
    how is it possible ?
    thank you

  • Thanks for the tutorial…One thing that I haven’t been able to figure out: Why do you have the model attribute for WineListView point to a collection (WineCollection), instead of setting the collection attribute to said collection of wines?

  • Pawan Bhole

    Nice post
    Very helpful. :)
    You can add a file names “wines” in folder api containing json response so that anyone can directly extract zip and run it.

  • Pingback: A Spine.js with Handlebars.js JavaScript Tutorial | simple mind()

  • Christophe…

    I took a stab at rewriting your app using Ember.js. I’d love your feedback:
    http://andymatthews.net/read/2012/03/22/Rewriting-Backbone.js-wineshop-demo-using-Ember.js

  • switcherdav

    Thanks for your tutorial,

    Can you tell me how you catch PHP errors ?

    for exemple, imagine that the creation failed, you return json object but I think that header code return stay 200 so only success event will be fire.

    so how do this ?
    test response like that :
    if( response.error ){ } ?

    I think it’s interesting to wait for the server return before add (or update, or delete) item in the collection (like in Flex for exemple)

  • Chris

    Thank you for your Tutorial. I’m still having a hard time getting your part1 sample to work. I try to put together the PHP sample with the Jersey sample (as the Jersey Sample isn’t using backbone.js). One thing I have discovered, as Jersey outputs the namespace “wine” that I had to use the parse method within the Collection:

    window.WineCollection = Backbone.Collection.extend({
    model:Wine,
    url:”../winecellar/rest/wines”,
    parse: function(data) {
    return data.wines;
    }

    });

    JSON Output:
    {“wine”:[
    {
    “country”:”USA”,
    “description”:”With hints of ginger and spice, this wine makes an excellent complement to light appetizer and dessert fare for a holiday gathering.”,
    “grapes”:”Pinot Noir”,
    “id”:”9″,
    “name”:”BLOCK NINE”,
    “picture”:”block_nine.jpg”,
    “region”:”California”,”year”:”2009″
    },

    Now I don’t see any errors in Firebug, everything seems to be fine, JSON is parsed, but only the HTML part is displayed. All the templates seem not to be loaded. Without any errors that point me to the problem I’m feeling quite lost :-|

    • Jose Miguel

      I had the same problem as you and it worked with the parse function. I think the problem in your code is that you wrote “return data.wines” and the correct code is “return date.wine” (without the “s”).

  • delai

    can not run this app in my place, not wines list was loaded

  • delai

    worked:
    like Pawan Bhole said:
    lost a file named ‘wines’ in api folder, the context is like http://coenraets.org/backbone-cellar/part1/api/wines

    • delai

      finally, found out, mac built-in apache REWRITE feature can not work correctly without additional configuring.
      anyway , there is a fast way to let this app work: change the “url:”../api/wines” to url:”../api/index.php/wines” in main.js

      • Sean McAuliffe

        I know this is a little old – if you have a moment, can you elaborate on the “additional configuring” part? Many thanks.

        • Sean McAuliffe

          Figured it out (used the .htaccess file in one of my local wordpress installs as a base):

          RewriteEngine On
          RewriteBase /~/tutorial/api/
          RewriteRule ^index\.php$ – [L]
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteCond %{REQUEST_FILENAME} !-d
          RewriteRule . /~/tutorial/api/index.php [L]

          -Cheers

      • Adam K

        Yeah,
        If memory serves you also have to change some of your httpd.conf settings too.
        I never could get it to quite work so I just started using MAMP. MySQL included was definitely a bonus

  • Ash

    how do we make our app available for people to download from the app store? I guess after the html and css files are ready we go to build.phonegap.com and create a build for different devices . where and how do i create the signing keys ofr android , ios ? Please your help will be greatly appreciates .. There might be so many people like me looking for the same information..

  • Yash

    Hi,

    The Wine Cellar application assumes that a single person is managing his wine cellar. Had this been a multi-tenant application where every user would login and manage his own cellar, how would we pass the session data to the REST service? Would we send the username and password along with every REST URL?

    Thanks,
    Yash

  • Trying to get this running on MAMP (OSX Lion) and strangely only the /bootstrap version included in the git repo seems to successfully connect to the DB and access the data. Can anyone suggest why the /tutorial versions seem unable to connect and access the wine data? It’s very frustrating to debug when a relative newby to php.

    • In reply to my own question… user: root had no privileges on the cellar database and my fix to this in mamp required going into phpMyAdmin, creating a user, assigning a password and then updating the database connection details at the bottom of /api/index.php

      The bootstrap version of the app uses memorystore.js to create a local database for testing purposes and was displaying this local data instead of the database version, thus hiding the inability to connect to the DB.

      Sorry for the posts but this might help some other newcomers to diagnose localhost issues.

  • Oh very good.

    Thanks

  • I’ve never written any code before and would love to have access to someone that could create code for my affiliates that use my wysiwyg web app development dashboard. Would you be interested?

  • Very helpful and easy to read through and try out Backbone.js. Thanks for taking time and writing these posts.

  • Amazing tutorial ! I’ve been searching whole day for tutorial to get started using backbone.js and all others I managed to find were incomplete, bugged or using horrible coding. But this one is perfect. Thank you for putting your time in it and keep the good work!

  • Greg

    re: window.Wine = Backbone.Model.extend();
    is there a specific reason you bind to ‘window’? it’s obviously the trend/convention, but since you’re using jquery to bind to the dom, just seems erroneous (or redundant?).

    Learning amd/pattern, so if i ask something relevant, let me know :-D

    Thank you for sharing.

    • Guy

      Did you ever get an answer to the window.wine question? Been wondering the same thing here

  • Levi

    Man this stuff is neat! I dont this its a good idea to bind all your variables to the window object. Rather create a new scope and declare them as standard variables

  • Pingback: Collection of Backbone.js tutorials | SpiderSoft Sydney developers()

  • Tom

    I implemented a simple test api to get the wines collection. For the wine list I return

    [{“id”:”1″, name”:”wine1″,”grapes”:”red”,country”:”england”, “region”:”europe”, “description”:”some desc”, “picture”:”aaa.jpg”}]

    The problem is that collection.fetch() fails and I don’t understand why. i did not implement the api calls for getting a single wine. Should this be the pb ?

    • Tom

      Stupid me… The JSON string was badly formatted. How can I get the clear error message for such cases ?

  • Pingback: Links June 10, 2012 » Metodiev Research()

  • Praveen

    Congrats , Great Effort.. A Small DOubt
    How can we run only part1 with the database connectivity

  • For the for the SlimPHP API to work on MacOS X 10.7 (Lion) I had to add Options +FollowSymlinks to my .htaccess file (and adjust the RewriteBase path accordingly). My .htaccess file:

    Options +FollowSymlinks
    RewriteEngine On

    # Some hosts may require you to use the `RewriteBase` directive.
    # If you need to use the `RewriteBase` directive, it should be the
    # absolute physical path to the directory that contains this htaccess file.
    #
    RewriteBase /api/

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php [QSA,L]

  • Hi to all, good tutorial!
    I wrote another tutorial app focusing my attention in Observe Model implementation.

    The app search Twitter and display tweets so I called – TwitterSarch App
    http://goo.gl/JHil3

  • Pingback: jQuery Birthday Picker and others « William Jiang()

  • Pingback: Backbone 介绍及学习资料索引 | Hugo Web前端开发()

  • You have the most straight forward example of how to use backbone.js on the entire internet.

  • Pingback: Algunas notas sobre Backbone JS | Kinetica Solutions Blogs()

  • Vladimir Sizov

    If you’re using WAMP and having troubles retrieving list of wines or any results from “api”, check (make checkbox appear) on “rewrite_module” in list of modules in WAMP taskbar menu.

  • Rob von Nesselrode

    Any tips on how to get the Slim stuff to work on Windows 7. I already have PHP running under IIS and the SLIM doco says it needs a Web Server as a pre-requisite. Do I have to create a local virtual and point it to the index.php? In which case what do I have to modify to get the sample to use it?

  • Pingback: Backbone.js and Twitter Bootstrap tutorials - Adriel Blog | Adriel Blog()

  • Jan

    Hi Christophe,

    Thanks a lot for the tutorial. This is the one I have been looking for all the time! Clear, step-by-step how to with details. Great job!

    Cheers,
    Jan

  • Helen

    The following training video explains this backbone Celler app well.
    http://www.youtube.com/watch?v=-_c2JjjiCPE

  • Paul

    Syntax highlighter seems to be broken. And the following class declaration looks weird:

    Here is the code:

  • Pingback: Single-Page CRUD Application with Backbone.js and Twitter Bootstrap | Christophe Coenraets()

  • Wow! This three part tutorial helped me a lot. Thanks for sharing your ideas. =)

  • Pingback: Learn Backbone.js Completely | JavaScript is Sexy()

  • maoshuyu

    test

  • Joe

    Hey Christophe.

    In case anyone is interested I created a simple Node.js/MongoDB back end for this tutorial (part 1).

    https://github.com/porche1975/winestore-nodejs-part1

    • marko

      Line 20, shouldn’t it be: new WineListItemView({model:wine}).render().el ?

  • Pingback: Javascript Practice: Decided to include Node.js and MongoDB | thedev.ro by Alex Ionica()

  • Pingback: Anonymous()

  • Mike

    Hey thanks a lot for the tutorial, hope to see one on how to fun Flex so I can see it in action!

    Also I have an error in my code: “Uncaught TypeError: Cannot call method ‘render’ of undefined ” (line 63)

    http://pastebin.com/HAW0T85m

    Thanks for this, I really appreciate people spreading knowledge on Backbone :)

    • Mike

      Jk, it was just a typo! Can’t wait to get started on the next two!

  • Hi All,

    Please let me know how we could pass the text box values from index.html to Models–>winemodel.js to the API Url in the Part 1.

    Thanks
    Chinna

  • Sansuns360@gmail.com

    Demo App is not showing the wine record, it simply shows a blank list and the heading “Welcome to Backbone Wine Cellar”. I checked with my database its working fine and the connections are all working. No exception or errors either. Can you please give some guidance to troubleshoot this issue.

    Tks.

  • rd

    sir i full version on github for cellar set properties file after running the then only page display as heading “Welcome to Backbone Wine Cellar” and a vertical box on left hand side
    then what should i do for execute the application,please reply fast………

  • Telmo

    Hi Christophe, thanks a lot for this. I just finished the code school tuts and i was looking for some real life example on the basic structure. I’m glad i found your site. I now know where to start a project with Backbone + extra bonus track Slim for a easy RESTful in PHP (that little thing is sweet :)

  • Pingback: Part 6: Displaying Wildfires | blog.davebouwman.com()

  • Pingback: Baby steps to Backbone.js: Exploring collections | Tu Ngoc Man()

  • Pingback: How can I get Tweet Timeline with using Backbone.js? - How-To Video()

  • Sansuns360@gmail.com

    I have been lurking around this wineceller for a while but still not able to get it working in my local WebLogic with Apache Derby backend. I debug and made sure the DAO part is not the issue.

    So I like to go back to basics and get the backbone Java version of Part 1 from GitHub. I get this errror:

    503 Service Unavailable.

    Appreciate if the archives are made available for newbies to get this started and understand the code in a simple example.

    Thank you

  • adika86

    Very nice job! Really enjoyed it and understood a lot! I think there are too few apps which use backbone… Recently I found an app on google play, which used backbone and looked pretty nice. I think it was called close2u. Anyway really nice job, keep up the good work and we want more of these! :)

  • David Cosgrove

    Hey Christophe,

    First of all, thanks for your series of blogs – they’ve been important resources in my learning web technologies.

    I tried to build this example myself and ran into some issues that prevented it from working – namely, the ItemListView was not rendering. After researching this issue, it seems that the problem stems from a change in a more recent version of Backbone.js which requires parameters to fetch() in order to properly bind the rendering to the model updates.

    Changing line 62:

    this.wineList.fetch();

    to

    this.wineList.fetch({reset: true});

    Fixes the issue.

    Thanks again

  • Pingback: Sample App with Backbone.js and Twitter Bootstrap | HTML CSS3()

  • Simon B

    Great tutorial

    Am having trouble getting the winelist from the api

    when i go directly to it

    eg: http://localhost/cellar/api/wines — i get the full list of details yet the new WineCollection call doesnt return anything

    I installed the php backend version and it ran fine

    Stumped

    • Simon B

      Ok as it turns out my WineCollection does return this when in the console (when i log this.model.models)

      Array[1]
      0: r
      _changing: false
      _events: Object
      _pending: false
      _previousAttributes: Object
      attributes: Object
      wine: Array[12]
      0: Object
      1: Object
      2: Object
      3: Object
      4: Object
      5: Object
      6: Object
      7: Object
      8: Object
      9: Object
      10: Object
      11: Object
      length: 12

      But _.each doesnt run thru it once

  • Pingback: Backbone Example Sites with Tutorials | Hugo Mineiro Portfolio()

  • Nice article.

    But the demo link is not working,
    http://coenraets.org/backbone-cellar/part1/

  • Rene

    I’m trying to get the upload filenames to be the ‘record-id.jpg’, any idea what would be a good aproach to accomplish that. So instead of just the filename, i would like to tie it more to the created records, and make it unique.

    Any help would be very appreciated!

    Rgds,

    Rene

  • In your router#list function why do you initialize the view with the wine collection stored to a model attribute?
    I think it would be much better suited to the collection attribute like so:

    61| this.wineListView = new WineListView({collection:this.wineList});

    Also you’re form is bugged to post comments to to the first opened “leave reply” on the page instead of the one the submit event is actually coming from.

  • Hi are using WordPress for your site platform? I’m new to the blog world but I’m trying to get
    started and create my own. Do you require any html coding expertise to make your own blog?

    Any help would be greatly appreciated!

  • Pingback: Where to Learn backbone.js online | Learn Web Tutorials()

  • Pingback: Backbone, Django and Tastypie – view item is not populating view list | Technology & Programming Answers()

  • Pingback: Week 0, Day 3 | Leaena.com()

  • Pingback: Render function of view is not working | Technology & Programming()

  • Pingback: Getting started with Backbone.js | Anders Grendstadbakk()

  • Ursula

    I know this is a bit old but… does anybody know why would slim framework fail to load the wine list when I set up your app “as is” in an external web hosting? I can make it work locally on my machine but when I uploaded to another server it doesnt load the wine list, page just loads the menu bar and teh rest is blank. I developed a test app to see if it wasnt communicating with teh sql database and that wasnt the problem. It is as if it doesnt find the index.php file to load the wines. It seems to me as if it has to do with htaccess but I am not sure how to set it up, ive been researching but nogo. Help is appreciated, thanks.

  • Sid

    Please correct me if I’m wrong, but I see a race condition in your code.

    Line 62 – 63:
    this.wineList.fetch();
    $(‘#sidebar’).html(this.wineListView.render().el);

    You already bounce the WineListView render method to the wineList ‘reset’ event on line 15.

    When you call this.wineList.fetch(), won’t wine list view render method will invoke in response to the collection’s “reset” event? If so, then explicitly invoking wineListView.render() on line 63 causes a race condition because you never know if the fetch() method’s ajax call completes before hitting line 63.

    Maybe a better solution would be to change line 63 to:

    $(‘#sidebar’).html(this.wineListView.el);

    That way, you append the wine list view “el” to the DOM, and when the “reset” event fires on the collection, the render() method will render the collection inside “el”.

    Would appreciate your feedback about this. Thanks

    Sid

    • Sid

      bound*

  • Very elaborate and concise article and better contender to impress.js

    http://themseo.com/arvind-kejriwal-jokes/

  • Roman

    Hi!

    It looks like something wasn’t substituted on Server Side here: http://coenraets.org/backbone-cellar/part1/ (‘>).
    Am I right?

  • Roman

    Sorry for repost, but tags are filtered.

    It looks like something wasn’t substituted on Server Side here: http://coenraets.org/backbone-cellar/part1/ (‘>)

    Am I right?

  • Roman

    The are filtered even after spaces were added between < and %.

    It looks like something wasn’t substituted on Server Side here: http://coenraets.org/backbone-cellar/part1/ (Line 31 in the source)

    Am I right?

  • user1084321

    C:\Users\USER>curl -i http://coenraets.org/backbone-cellar/part1/api/wines
    HTTP/1.1 200 OK
    Date: Sat, 15 Feb 2014 20:08:38 GMT
    Server: Apache
    X-Powered-By: PHP/5.3.28
    Set-Cookie: PHPSESSID=a7f99f71f15111f0464fec40e865fd7f; path=/
    Content-Length: 124
    Set-Cookie: a7f99f71f15111f0464fec40e865fd7f=flash%7Ca%3A0%3A%7B%7D; path=/
    Connection: close
    Content-Type: text/html; charset=UTF-8

    {“error”:{“text”:SQLSTATE[HY000] [2002] Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’ (2)}}

  • Karl

    Hi Christophe,
    I understand this tutorial is pretty old, but is there a chance that the sample app as referenced here:
    http://coenraets.org/backbone-cellar/part1

    can be fixed to see it in all its glory?

  • Rajesh

    Hello,

    I’m looking forward to develop bootstrap mobile application in Visual studio with SQL as backend.

    Is it possible to develop on Visual Studio IDE.

    Please write me back ASAP. I’m waiting for your response.

    I want more info on this..

    Thank You.

  • Doesn’t it worry you that your exposing everything globally on the window object? If you have any methods that send data and return data then it’s open to anyone who feels like looking for it. Opening you up to many security invulnerabilities like script injection, someone could insert whatever code they want to execute into your view and then run a method that saves data.

    – Josh

  • Pingback: In One Post: Backbone.js | Day of the Duck()

  • I read this paragraph fully on the topic of the comparison of hottest
    and previous technologies, it’s amazing article.

  • I am a engineer and I have just come up with a innovative online dating internet site.
    I will be looking out for ‘beta’ evaluators to search and try it out.

    Do you wish to opt in? We are able to pay you.

  • C’est bizɑrre je pensais justement faire un petit article similaire à celui là

  • I’m not sure why but this web site is loading very slow for me.

    Is anyone else having this problem or is it a problem
    on my end? I’ll check back later and see if the problem still exists.

  • Hi to all, the contents existing at this web site are actually amazing forr people knowledge, well, kesep up the good work fellows.

  • Awesome blog! Is your theme custom made or did you download it from
    somewhere? A theme like yours with a few simple tweeks would really make my blog stand out.
    Please let me know where you got your theme. Cheers

  • vikash kumar

    I Love your all post. very-very nice post. Thank you so much.

  • Hey I know this is off topic but I was wondering if you
    knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience
    with something like this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.

  • I’m keen on the precious information a person give the articles you write. We’ll take a note of ones site and appearance one more time the following usually. I’m relatively specific I am advised numerous new stuff the following! All the best for the next!

  • It’s genuinely very complicated in this busy life to listen news on Television,
    therefore I only use the web for that reason, and get the most up-to-date information.

  • I loved as much as you’ll receive carried out right here. The sketch
    is tasteful, your authored material stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following.

    unwell unquestionably come more formerly again as exactly the same nearly very often inside case you shield this
    increase.

  • I was recommended this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my
    trouble. You are amazing! Thanks!

  • Yesterday, while I was at work, my sister stole my apple ipad and
    tested to see if it can survive a twenty five foot drop,
    just so she can be a youtube sensation. My iPad is now destroyed and she has 83 views.
    I know this is entirely off topic but I had to share it with someone!

  • Joe

    Thanks for the info and link to GitHub.

  • Pingback: How to hoop a demonstrate router slight outcome in BackBone.js controlling ajax - Abram()

  • Pingback: backbone.js | mauroprogram's Blog()

  • The view responsible for displaying

  • Pingback: Материалы для изучения backbone.js « Blog — organiser()

  • Pingback: » Libraries - @ fake's()

  • I’d like to know how can I add this project to Eclipse

  • ı mean this work like many peaples

  • Все качества продукции

  • Everything quality production

  • kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır.http://jonsunsport.com/basketbol-takim-formalari.html

  • quality, reliable, cost-effectiveness and the associated jobs are done imalattan.profesyonel team.http://jonsunsport.com/spor-coraplari.html

  • superonline Yalın internet kampanyası ile ev telefonunuzla bizi tercih ederseniz 24 ay boyunca sabit hat ücreti ödemezsiniz. Herhangi bir sabit hattın olmasa da Turkcell Superonline’dan superonline yalın internet hizmeti alabilirsin.

    Ev numaranı Turkcell Superoline’a taşıyarak telefon faturanda avantajlı tarifelerden yararlanabilirsin. Ayrıca 24 ay boyunca her yöne 100 dakika konuşma paketini de ücretsiz olarak kullanabilirsin. Taahhüt süresince aktivasyon, kurulum ücreti ve aboneliğiniz süresince modem ücreti ödemezsin.

    http://www.superonlinenet.net/superonline-yalin-internet.html

  • Vodafone ADSL ile internet ve sabit telefon hizmeti bir arada.
    Vodafone NET internet + Sabit Telefon + 3000 Dk Ücretsiz görüşme. 59,90 TL

    Vodafone ADSL ile diğer operatordeki taahhüt bedeliniz bizden. 120 TL kadarını vodafone net karşılıyor.

    Vodafon Net ile internetin keyfini çıkarın.

    http://vodafonebasvuru.com/adsl.html

  • Türkiye’nin en kaliteli resim kursu olan Taksim Resim Kursu ile eğitimlerinizi alarak hayal ürünü eserlerinizi somutlaştırabilirsiniz.
    3 şubemiz ve onlarca atölyemiz ile eğitimlerimizi sanatsal bir ortamda üretmekle beraber yeni sanat eserleri üretebilecek bir ortam ile yeni ürünler ortaya çıkarmaktayız.
    Taksimdeki şubemizi Zafer GAZİOĞLU hocamız yönetmektedir. Asistanları eşliğinde eğitimleri yürütmektedir. Taksim Güzel Sanatlara Hazırlık konusunda eğitimlerimiz için sizleride bekliyoruz.

    http://www.arkhesanat.com/

  • Yeni yıla sayılı günler kala 2015 te vodafone ye geçmek isteyenler müşterilerimize özel indirimler ve ayrıcalıklar sizlerle. Vodafone fiber internet ile doyasıya internette gezinmek ve internet donmasına son verin. Üstün fiber alt yapısı ile Gbytlık verileri dklar içinde indirerek sizleri saatlerce bekletme derdine son veriyor.
    Evinizde telefon yoksa eğer vodafone yalın adsl ile sabit hat ücreti ödemeden interneti kullanabilmektesiniz. Bir çok avantajlı paketi internet sitemizde kulabilirsiniz.

    http://vodafoninternet.com/

  • Evinizdeki sabit telefonun masrafları çok oluyorsa ve önüne geçemiyorsanız üstelik birde internet masrafınız varsa derdiniz büyük !

    Vodafone adsl ile sabit telefonunuza ayda 3000 dakika hediye fırsatları ve vodafone internet ile 49.90 TL sabit fiyat garantisi versek nasıl olur ?
    Herkes konuşur biz yaparız vodafone ile anı yaşamak dileğiyle.

    http://yellowmileadsl.com/adsl.html

  • Tüm Hristiyan aleminin Noel bayramını kutlarız…
    Biz müslümanlar olarak her dile ve her inanca saygımız var ve islamın hoşgörü anlayışı sizi sarsın…

    Resim kursu ihtiyacınız varsa taksim resim kursu ile irtibata geçebilirsiniz. Sanatsal bir ortamda eğitiminizi tamamlamak için bizi tercih etmenizi öneriyoruz. Sizden aldığımız destek ile 3.şubemizden sonra 4. şubemizi açma düşüncemiz bulunmaktadır.

  • Telefonlu evinize bir masrafta internetten çıksın istemiyorsanız telefon ücretiniz bizden olsun internet ise sizden ne dersiniz ?

    Vodafone adsl ile 3000 dakika telefon konuşması internetinize ek ücretsizdir ayrıca internet faturanıza ek bir masraf geleden.
    Siz neden bizi tercih etmeyesiniz ki ?

    Sizleri HOŞGELDİN 2016 kampanyası ile aramızda görmek , müşterilerimiz iseniz yeni seçenekler ile sizlerleyiz.

  • Yeni yılın ilk şansını yakalamaya ne dersiniz ?
    Bakırköy Güzel Sanatlara hazırlık kursları adı altında verilen eğitimlerimizde %50 ye varan indirimli fiyatlar ile siz sanat aşığı bireylerin resim kursu muza gelebilmelerine vesile olmaktayız. Sizleri Eşsiz sanat eserleri ürettiğimiz atölyemizde görmek isteriz. Eserlerimizi incelemeniz ve sizlerinde sanata olan ilginizi bir çok kesime göstermenizi istiyoruz.

    Avcılar Metrobüs durağının hemen yanındaki atölyemize haftanın her günü gelebilirsiniz.

  • Sevdiklerimiz ile bir yılı daha iyisi ve kötüsüyle geride bırakmaya çok yakınız . Yeni yılın ilk şansını ayağınıza getiriyoruz. Taksim Resim Kursu ile resim kursu ihtiyacınızı eğitmenlerimizce inceleyerek en kaliteli eğitim modelimiz ile kişisel gelişiminizi tamamlamaya çalışmaktayız.

    Güzel Sanatlara Hazırlık Fakültelerine hazırlanmak istiyorsanız en ideal adrestesiniz çünkü Mimar Sinan Üniversite mezunlarından oluşmakta olan ekibimiz sizleri ideal yönlendirme ile geleceğe hazırlanmanıza vesile olacaktır.

  • Sinamayı evinize getirmeye ne dersiniz ? Vodafone filbox tv ile yüzlerce hd film ve belgesel size özel fırsatlarla …
    Tek yapmanız gereken web sitemizdeki formu doldurup sizi aramamızı veya bizi arayıp sizleri bilgilendirmemiz.
    Evdeki huzuru ve mutluluğu başka hiç bir yerde bulamıyorsanız sizin için evinizde bir sinamadan daha güzeli olamaz.
    Vodafone televizyonlu internet seçeneklerini inceleyerek dilediğiniz avantajlardan yararlanma fırsatını yakalayabilirsiniz.

  • Taksim güzel sanatlara hazırlık kursu olarak eğitmenlerimiz sektörün en prestijli sanatçıları olmakla beraber kurumunuz güzel sanatlara hazırlık söz konusu olduğunda öğrencilerinin %100 başarı elde etmesi bir tesadüf değildir.

    Taksim Resim Kursu ile Güzel sanatlara hazırlık alanında kendinizi geliştirebilir. Düşlemiş olduğunuz sanat eserlerini somutlaştırarak kağıtlara , tablolara kısacası hayata sunabilirsiniz.

    3 şubemiz ile Türkiye geneline hizmet vermekle birlikte eğitmen kadromuz Mimar Sinan Güzel Sanatlar Fakültesinden mezun ve gören almaktadırlar.

    Sizde kalite arıyorsanız bunun içinse ayrıcalıklar istiyorsanız bizi tercih etmenizi öneririz…

  • 31 Aralık 2015 yılın son günü ve yeni yıla başlangıç yapılacak bu günde 2016 yılının size, sevdiklerinize kısacası hepimize sağlık, mutluluk, huzur getirmesi dileğiyle HOŞ GELDİN 2016 diyerek mutluluğun bizi bulması , şansın bizlerle olması dileğiyle…

    Güzel sanatlara hazırlık alanında eğitimlerinizi almak için 2016 yılına özel fiyat seçenekleri ile sizleri atölyemizde görmek istiyoruz. Sanat alanına bakış ve kişisel gelişiminizi bizlerle geliştirmeye ne dersiniz.

    Taksim Resim Kursu ile sizler aramızda görmek istiyoruz…

  • Sanat eserleri üretmek hiç bu kadar zevkli olmamıştı. Güzel sanatlara hazırlık konusunda eşsiz bir eğitim seçeneği sunan arkhesanat taksim resim kursu adı altında eğitim vermektedir.

    Kişisel gelişiminizi bizlerle tamamlamak istiyorsanız irtibata geçiniz.

    http://www.arkhesanat.com/

  • harika bir backlink ve firma ekle sitesi tavsiye ederiz.

  • ntalya Airport Transfer to Hotels & private residences using a modern fleet of fully licensed & insured vans. We will take you from Antalya Airport to your destination and back in comfort and safety, at a low price and with great customer service.

    Transfers to/from Side, Belek, Antalya, Kemer, Alanya, Okurcalar, Konakli, Lara, Avsallar, Incekum, Mahmutlar, Kargicak, Finike, Gocek, Dalaman, Tekirova, Kas and Camyuva

  • Wow! This three part tutorial helped me a lot. Thanks for sharing your ideas. =)

  • while I was at work, my sister stole my apple ipad and
    tested to see if it can survive a twenty five foot drop,

  • sonal

    Hi,

    I tried running the code, as is but i am unable to do it. I am getting the followinf error

    jquery-2.1.3.min.js:4 XMLHttpRequest cannot load file:///C:/Users/sonkhare.PARTNERS/Desktop/api/wines. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

    Please help

  • The jQuery client below sends data to the server using JSON (addWine() and updateWine() methods

  • i thought it would be real tough but you made it quite easy, simple and interesting

  • while I was at work, my sister stole my apple ipad and
    tested to see if it can survive a twenty five foot drop
    http://www.boredpanda.com/the-renaissance-palace-which-served-as-an-asylum/

css.php