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

2012/06/26

The 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!

Author: Joe Zimmerman

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.