This Lesson Covers:

Backbone Views

On a person note, I use views way to much. I am a UI person, so a lot of what I do interacts with the DOM. Somehow, the way views work just makes more sense then the models and collections.

Here is your basic view:

var TotalView = Backbone.View.extend({
    initialize : function() {
        //   model.on( event,         callback,    context);
        this.model.on('change:total', this.update, this);

        this.model.fetch();
    },
    update : function(model, total) {
        this.$el.text(total);
    }
});

var totalView = new TotalView({
    el : '#total',
    model : totalModel
});

Here we have the view to go with our total model. That bottom couple lines I was saying was going to change? We don’t need that anymore. although, having the view call model.fetch() is not ideal.

And the view for products?

var ProductView = Backbone.View.extend({
    tagName : "li",
    className : "product",
    initialize : function() {
        this.tmpl = function(obj) {
            return '<h2>' +  obj.title + '</h2>' + 
            '<p>' + obj.desc + '</p>';
        };
    },
    render : function(obj) {
        this.$el.html(this.tmpl(obj));
    }
});

var productView = new ProductView();

That is pretty much all you need for this page. We are setting up the template and creating a render function. Keep in mind, you will probably want to replace the template with a template library like hogan.js or dust.js.

We still have to put everything together.

var AllProducts = Backbone.Model.extend({
    url : '/products'
});
var ProductModel = Backbone.Model.extend({
    defaults : {
        desc : 'no description',
        title : 'no title'
    }
});
var ProductView = Backbone.View.extend({
    tagName : "li",
    className : "product",
    initialize : function() {
        this.tmpl = function(obj) {
            return '<h2>' +  obj.title + '</h2>' + 
            '<p>' + obj.tags + '</p>';
        };
        this.render();
    },
    render : function() {
        this.$el.html(this.tmpl(this.attributes));
    }
});
var ListView = Backbone.View.extend({
    el : "#productsList",
    append : function(html) {
        this.$el.append(html);
    }
});

var productsModel = new AllProducts();
var productCollection = new (Backbone.Collection.extend({ model : ProductModel }))();
var productsList = new ListView();

productCollection.on('add', function(product) {
    productsList.append((new ProductView({ attributes : product.attributes })).el);
});

productsModel.fetch({
    success : function (model, products) {
        productCollection.add(products);
    }
});

Whoa, thats a lot of code just to get some JSON and render it into html. To do the same thing with just jQuery would only take a couple lines. Let me point out two powerful features you will not get with just jQuery.

1. Object Oriented
Lets look at the list view.

var ListView = Backbone.View.extend({
    el : "#productsList",
    append : function(html) {
        this.$el.append(html);
    }
});

If I want to create another list view with another element all I have to do is seperate the functions from the el.

var ListView = Backbone.View.extend({
    append : function(html) {
        this.$el.append(html);
    }
});

var ProductView = ListView.extend({
    el : "#productsList"
});

var TagView = ListView.extend({
    el : "#tagsList"
});

Now the two list views share the same append function. This means if we want to change how all the list views work, we only need to change it once, and if the productView breaks, we know it is not a problem with the ListView because the TagView would also have broken.

2. Flexibility
Lets pretend we want to add data from a different source. All we would have to do is create a new model, and add the new data to the collection.

var AllRecipes = Backbone.Model.extend({
    url : 'http://recipesapp.com/usersrecipes'
});

var allUsersRecipes = new AllRecipes();

allUsersRecipes.fetch({
    success : function (model, products) {
        productCollection.add(products);
    }
});

As long as these new recipes have a title and tags, they will be rendered fine. You could even convert them into something the view could use in the success handler.

You will find that we will be trading short snippets of code for large structured objects a lot. Yes, we miss out on a cool feature of javascript, doing alot with a couple lines of code, but we will be able to reuse these parts all over our application and in the future.

Thoughts on Reuseability

For some of you developing full applications in javascript might feel overwelming but when you are done with a block of code, keep these things in mind:

1. How will other people read this code
2. How can other people use this code
3. How useable will this code be in the future
4. How well does this code work with code already written

Try giving yourself a score for each of these. The better the score, the more productive you, and people you are working with, will be.