Tutorial – Page 2 – Mike Barlow (BarDev)

Re-Learning Backbone.js – Templates (Underscore)

Even though templates are not part of Backbone.js, I believe it’s critical to have a basic understanding of templates. Templates are a core component that will be used with Backbone.js Views.

Templates will help us separate code from the HTML markup. When MVC is discussed in regards to server side (Ruby on Rails, ASP.NET MVC) the “V” is for view. Views are implemented different in Backbone than in most server side technologies. On the server side, views should be extremely dumb and very little logic if any should be include.

Backbone.js has a key object called View. The Backbone.js View does not resemble server side views. Backbone.js Views are not dumb and they do have logic. Some people have described Backbone.js Views as being more similar to Controllers on server side. I believe that templates on the client (JavaScript) side work more like the views on the server side. It’s definitely a mind shift when moving from a server MVC mindset to a client side MVC mindset. Hopefully this will make the transition easier.

I want to keep this as simple as possible. We will take very small steps to help you learn about templates. Only 2 JavaScript libraries will be needed, jQuery and Underscore. We will not be using the Backbone.js library. There are many options for templating, but we will use the built in option that Underscore provides. In case you didn’t know, Backbone.js has a dependency on Underscore. This is why we are using Underscore’s template engine, but other template engines can be substituted for the Underscore template engine.

Very, Very Simple Template

Continue reading “Re-Learning Backbone.js – Templates (Underscore)”

Re-Learning Backbone.js – Models

Over the past few days I’ve started to re-learn Backbone.js. It’s been a good while since I have worked with it. One of the many resource that I used during this endeavor is the post that I created January of this year. Understanding Backbone.js – Simple Example

Since I’m re-educating myself on Backbone.js, I thought this would be a good opportunity to Blog about the process I’m going through while re-learn Backbone.js again. In this post I will present the concept of Backbone.js Model.

So here I go again.

Based on past experience, I believe creating an application on Backbone.js there’s are few key concepts that should be understood: Model, View, Collection, Template and Router.

The first thing we are going to do is create a Movie class and instantiate an instance of the movie. Nothing fancy, this should be very simple. This Movie class will be based on a Backbone.js Model. JavaScript does not support classes, but here we will simulate a class.

Movie Sample 1


Movie Sample 1

    
    
   	
	


    Movie Sample 1

The code above is creating a Movie class from Backbone.Model.Extend. When an object is created from the Movie class the intialize function should be called and the message “Movie Model Created” should be written to the console.

If you load this page in a web browser, I’m using chrome, the results should be displayed in the console.

There is a problem here, everything is a global variable. Since we will be creating many Models, Views, Collections and templates, lets create a place to organize these structures.

var MovieApp = {
	Models: {},
	Collections: {},
	Views: {},
	Templates: {}
};

MovieApp.Models.Movie = Backbone.Model.extend({
	initialize: function () {
		console.log("Movie Model created");
	}
});

var movie = new MovieApp.Models.Movie();

Continue reading “Re-Learning Backbone.js – Models”

Understanding Backbone.js – Simple Example

I’m by no means an expert in Backbone.js. I created this post because I had difficulty understanding backbone, and I hope that the information that I provide will help others grasp Backbone.js a little faster. This post is directed to individuals who understand the concepts of Backbone.js, but are having a difficult time implementing a simple solution.

This post provides a simple example on Backbone.js Routers, Models and Collections and Views. I’m going to try to make this example extremely simple. But also show key Backbone.js concepts

I’m probably not the best writer. It would take me days, if I were to validate all the grammar, spelling and such. So I’m just going to try to get it done. Even though the grammar and such may not be perfect, the technical parts of the article should be correct. I hope you enjoy.

A few months after writting this post, my priorites and technology direction changed. For probably 6 months I did little work with Backbone.js. When I came back to Backbone.js in November, I was a little lost. I had to become familar with the technology once again. I thought it would be a good opportunity to write about Backbone.js basics. Here are posts where I describe the basics of Backbone.js.

This post will be based on a contrived idea of displaying a list of movies at a theater.
Continue reading “Understanding Backbone.js – Simple Example”