Backbone.js Application Walkthrough Part 1: HTML and Models – Video Tutorial

Backbone.js Application Walkthrough Part 1: HTML and ModelsThe day everyone has long been waiting for has finally arrived. I've just started the first part of a series of posts walking through how to build an actual application using the Backbone.js JavaScript MVC framework. With this first piece of the puzzle I cover the structure of the application and get you started with some HTML plus the model and collection JavaScript code. Let's take a look!

Backbone.js Video Tutorial Series

Final HTML Code

<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>

<div id="header"></div>

<div id="sidebar"></div>

<div id="content">
    <h2>Welcome to Backbone Cellar</h2>
    <p>This is a sample application designed to teach people with the basic knowledge of Backbone.js how to use it in a real application.</p>
</div>

<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/underscore-min.js"></script>
<script src="js/libs/backbone-min.js"></script>

</body>

</html>

Final JavaScript Code

window.Wine = Backbone.Model.extend({
    urlRoot: "wines/",
    defaults: {
        "id":null,
        "name":"",
        "grapes":"",
        "country":"USA",
        "region":"Wisconsin",
        "year":"",
        "description":"",
        "picture":""
    }
});

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

Conclusion

Well that's it for this first part of the Application Walkthrough. I'm excited and looking forward to finishing this series, as I'm sure you are too. If you don't see the next part this Thursday, definitely expect it by Monday. We should start seeing some of the real work coming through in that video, so stay tuned. God Bless and Happy Coding!

About the Author

Author: Joe Zim

Joe Zim

Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.


  • grattaculo

    oh god i hate when good screencast has terrible audio..

    • http://www.joezimjs.com Joe Zimmerman

      What’s wrong with the audio? It’s not great but it’s not fuzzy or hard to understand.

    • http://www.joezimjs.com Joe Zimmerman

      I updated the video, with better volume. If that’s all it was, then I hope it’s good now. If there was something else that you were talking about, then I hope someone will let me know, because I didn’t notice anything “horrible”.

  • maurospage

    Audio is orrible, please fix it because your screencast are usually so great! But this audio makes it useless

    • http://www.joezimjs.com Joe Zimmerman

      What do you guys mean it’s horrible? I guess it’s quieter than my other videos but it’s no worse in any other way that I can tell.

      • maurospage

        I meant that the audio was much lower then the other tutorials. Your tutorials are the best one out there, so we all hope to view (and listen) your next tutorial :)

        Thanks for all you are doing :) Keep on

  • pixelBender67

    Audio is fine Joe, nice remake of the app!

  • Mohamed Jama

    Its pretty cool, audio is fine too, thanks joe

  • rashmi

    Great Tutorial. I don’t have any issues with the audio.

  • http://www.joezimjs.com Joe Zimmerman

    Thanks everyone for informing me that the audio is fine now. I’m glad that it was just the volume and that I could fix it.

  • http://twitter.com/Rhysling Bob Kummer

    Audio is great. Video is excellent. (What’s the Frequency, Kenneth?) Thanks, again! This is exactly the leg up on Backbone I needed!!

    • http://www.joezimjs.com Joe Zimmerman

      You’re way too kind.

  • ovais

    Thanks a lot Joe. It helped me understanding backbone much better.