Backbone.js Basic Knowledge

In order to creating an application on Backbone.js, there’s are few key concepts that should be understood: Model, View, Collection, Template and Router.

Backbone.js Model

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

-Create a new model:

<script type="text/javascript">
    var Movie = Backbone.Model.extend({ // extend Backbone.Model and provide instance properties
        defaults: {                     // add default values
            title: "Bag IT",
            year: 2010,
            averageRating: 4.6,
            rating: "NR"
        },
        initialize: function () { // pass in the initial values of the attributes
            console.log("Movie Model created"); // or define an initialize function
        }
    });
    var movie = new Movie({ title: "Bag IT 2", year: 2012, averageRating: 3.6 });
    console.log("The Movie Title: " + movie.get("title") + "; Rating: " + movie.get("rating"));
</script>

The output in console should be:
output
If you want to change the property value, use the set() method. Do not assign the value directly!

    movie.set({title: "Good IT"});
    console.log("The Movie Title: " + movie.get("title"));

Now the title has been changed to “Good IT”.

Templates (Underscore)
Templates are a core component that will be used with Backbone.js Views. And templates will help us separate code from the HTML markup.

<body>
    <div id="container1"></div>
    <script type="text/javascript">
         var template1 = "Title: Title1";
         var compileTemplate1 = _.template(template1);
         $("#container1").append(compileTemplate1());
    </script>
<div id="container2"></div>
<script type="text/javascript">
     var data2 = { title: "Title2" }
     var template2 = "Title: <%=title%>";
     var compileTemplate2 = _.template(template2);
     $("#container2").append(compileTemplate2(data2));
</script>
<div id="container3"></div>
<script type="text/template" id="template3">
    Title: <%=title%>
</script>
<script type="text/javascript">
    var data3 = {title:"Title3"}
    var template3 = $("#template3").html();
    var compileTemplate3 = _.template(template3);
    $("#container3").append(compileTemplate3(data3));
</script>
</body>

There is a single div with the id of “containter1″. This is where the results will be appended to. In addition,we are passing in a variable (data2) when we execute the compileTemplate function. It will be displayed in the area with the id of “container2”.In container3, we extracted the template from the inline script.Since the type is “text/template” the JavaScript engine will ignore anything within the script tags.

Backbone.js – View Basics

In Backbone, the View class can also be thought of as a kind of controller, dispatching events that originate from the UI, with the HTML template serving as the true view. We call it a View because it represents a logical chunk of UI, responsible for the contents of a single DOM element.

—-To be continued

Advertisements
This entry was posted in open-source. Bookmark the permalink.

2 Responses to Backbone.js Basic Knowledge

  1. Cool post! Question: Why do you need to add default values ? Can you just create a Movie Model and later when you create an instance pass the values ? Is there any specific use-case/idea behind setting default values in such case ? Thanks.

  2. garybbb says:

    Yes, the default values are optional. sometimes it’s a good idea to have some default values in case somewhere in our program we want to create a new instance of a model, but we are not sure what data we want to pass to it yet. In this case we can define some default values if values are not explicitly passed in when the model is instantiated.

    Remember that in JavaScript, objects are passed by reference, so if you include an object as a default value, it will be shared among all instances. Instead, define defaults as a function.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s