blog_with_comments.js

var Post = Backbone.Model.extend({
    defaults: {
        title: 'New post title',
        content: 'New post content', //Remember you cant set an id as a default;
    }
});

var Posts = Backbone.Collection.extend({
    model: Post
})

var blogPosts = new Posts([
    new Post({id: 1, title: 'Web development', content: 'Lorem ipsum'}),
    new Post({id: 2, title: 'Web design', content: 'Lorem ipsum ipsum'}),
    new Post({id: 3, title: 'Photography', content: 'Lorem ipseum ipsum ipsum'})
])

var AppView = Backbone.View.extend({ //templates and where on the page to draw itself;
    el: '#main',
    initialize: function(){//When initialize appView go and find the template in html;
        console.log('initialize');
        this.template = _.template($('#appView').html());
        this.$el.html(this.template);//If you pass a function into .html() it will look for the function and run it;     
    },
    render: function(){ //Draws itself on the screen;
        this.$el.html
    }
})

var AppRouter = Backbone.Router.extend({
    routes: {
        "": 'index',
        'posts/:id' : 'showPost',
        '*anything' : 'goHome' //A splat will let you match eveything 
    },

    index: function(){
        var view = new AppView({collection: blogPosts});
        view.render();
        console.log('You are at the index page');
    },

    showPost: function(id){
        console.log('You have requested the post with id', id);
    },

    goHome: function(){
        console.log('GoHome');
        document.location.hash = "" //Doing a redirect back to the homepage; 
    }
})

var router = new AppRouter();

$(document).ready(function(){
    Backbone.history.start();
})

//Models in backbone cant do inheritance;
//Set up the associations in Javascript; 
//Pick up and put down using indiviual pieces; 

//Render that knows how to render something onto the page; 
//You can also have a render function that does not stick something up on the page, but sets it up in memory;