(function($) {
 
    var UserInputView = Backbone.View.extend({
 
        el : '#UserInput',
 
        initialize : function() {
            this.helloListView = new HelloListView();
        },
 
        events : {
        addToHelloCollection : function(e) {
            var hello = new Hello({
                name : this.$('input').val()
            });
            this.helloListView.collection.add(hello);
        }
    });
 
    var Hello = Backbone.Model.extend({
        initialize : function() {
            this.name = 'name'
        }
    });
 
    var HelloView = Backbone.View.extend({
        tagName : 'li',
        render : function() {
            $(this.el).html('Hello ' +   this.model.get('name'));
            return this;
        }
    });
 
    var HelloList = Backbone.Collection.extend({
        model : Hello
    });
 
    var HelloListView = Backbone.View.extend({
 
        el : '#HelloList',
 
        initialize : function() {
            _.bindAll(this, 'render', 'appendToHelloUL');
            this.collection = new HelloList();
            this.collection.bind('add', this.appendToHelloUL);
        },
 
        render:function(){
 
            $.each(this.collection.models, function(i, helloModel){
                self.appendToHelloUL(helloModel);
            });
        },
 
        appendToHelloUL : function(helloModel) {
            var helloView = new HelloView({
                model : helloModel
            });
            $(this.el).append(helloView.render().el);
        }
    });
 
    new UserInputView();
 
})(jQuery);
            'click button' : 'addToHelloCollection'
        },
 