Need to Make a Simple List? Try Backbone!

Last week I talked about separation of concerns and why it's important when you start building apps. One way this is achieved is by using frameworks, like Backbone. Backbone is basically a lightweight framework that allows you to structure your JavaScript code in a Model View fashion where:

• Model is an object that represents the data and associated methods.
• View is responsible for rendering data to the user and has event handling.

To get started, any organized coder would set up their main file with the data that will make up the list. Usually I call this file app. For this example we're going to make a list of cakes!

//here is our cake data
var cakes = [
  {
    name: 'Strawberry Shortcake',
     /* some info here */
  },
  {
    name: 'Gentilly Cake',
     /* cake info here */
  },
  {
    name: 'Tiramisu',
     /* some more info here */
  },
];

So rendering a list refers to taking a collection of data and displaying that info on the DOM of an application. Inside this file, we'll need to do three things:

// 1. instantiate collection based on the Cakes model
var myBakery = new Backbone.Collection(cakes, { model: Cakes });
// 2. instantiate the collection view based on the collection myBakery
var cakeView = new CakeView({ collection: myBakery });
// 3. append the bakeryView to the body of the HTML page you definitely made
$('body').append(cakeView.$el);

You'll notice in step 1 I refer to a model called cakes but we haven't made that yet! That's the next step: set up a file that will be your model, which in this case will control the data for a single cake. That will look something like this:

var Cake = Backbone.Model.extend({
// default cake info
  defaults: {
    name: 'Strawberry Shortcake',
    image: 'strawberry-shortcake-cake-thumb.jpg',
    Ingredients: `1 1/2 pounds strawberries, stemmed and quartered,
                  5 tablespoons sugar,
                  2 cups all-purpose flour,
                  2 teaspoons baking powder,
                  1/4 teaspoon baking soda,
                  2 tablespoons sugar,
                  3/4 teaspoon salt,
                  1 1/2 cups heavy cream,
                  Whipped Cream`,
  }, // hungry? i am...

});

Finally, create the view file (I called this cakeView in step 2). The cakeView controls the rendering of the entire bakery collection. So you start by creating a property that will handle the rendering of data to the DOM. For each new item, a new single cakeView is being instantiated based on the cakeModel. Then call the render function when this gets initialized to render it to the page.

var CakeView = Backbone.View.extend({
  tagName: 'table',

  //renders each cake in our bakery collection on the cakeView
  render: function() {
    this.$el.html('');
    //looping through the cake data
    this.collection.each(function(cakeModel) {
      /* for each piece of data, passing the model containing the current cake's data
      to the cake view and appending to the table */
      this.$el.append(new CakeView({model: cakeModel}).$el);
    }, this);

    return this;
  },
  // on initialize, the view will render
  initialize: function() {
    this.render();
  },
});

And that makes a list showing some cakes and how to make ‘em using Backbone. Pretty simple. In essence, Backbone provides comfortable options to structure code better. It’s simply about that.(And has great docs, can't fight me there!)

For anyone who wants to say backbone is totally irrelevant here is a list of sites still using it!