Representing your data in javascript - Learning Backbone js

This entry is part 2 of 14 in the series for A Complete Guide for Learning Backbone Js

• Introduction and Installation
• Representing your data in javascript
• Defining Models in backbone js
• Adding Validations in models backbone js
• Explaining views in backbone js
• How to use templates in backbone js
• How to improve templates in backbone js
• Collections in backbone js
• Collection views in backbone js
• Template helpers in backbone js
• How to use namespace in backbone js
• How to handle dom events in backbone js and define your custom events (Live Demo)
• Routing in backbone js

Agenda

In this topic we will not be discussing backbone, We will be learning how to represent data. We are using the same application that we build in previous blog post and building on top of it. Let’s create a new file, i.e., main.js and let’s include that in index.html.

Defining the object

Now let’s define an object Person which has some attributes like name, age or occupation. Here is the code for that.

  var Person = function(config){
    this.name = config.name;
    this.age = config.age;
    this.occupation = config.occupation;
  };

  Person.prototype.work = function(){
      return this.name + 'is working.';
  };

So why we are defining in this way is evident because we want to give structure. Classes and objects are the best way to describe a structure. So in the code sample above, we defined a class Person and a function work. Save the file and open index.html file on browser. (Make sure you have included main.js file in index.html)

Fire up the console and fire these commands

So from Chrome developer console, you can trigger following things to see some results.

  var person = new Person({name: "Mohit Jain", age: 25, occupation: "Software Developer"})
  // this will create a new person object and then will set some attributes of that object.
  person.name          // will give you the name of the person
  person.age           // will give you the age of the person
  person.occupation    // will give the occupation of the person.
  person.work();      // will return the output of the function ie work defined in the main.js

Cool. Let’s take a look at the screenshot explaining things on chrome console.

Output on Chrome Console

That’s the basic way to give a better structure your code. That’s all in representing your data in javascript. Let’s move forward and define the first model in your backbone application.

Source code

If you are facing any issues. Check out the source code files at github. I will be creating more and more directories in the same repo regarding each post. Still, if you have any doubts you can comment on the blog post itself, and I will try to reply back asap.