What is wrong with the handlebar code?

Hey so I am trying to switch from underscore to handlebar, but nothing is rendering from the model, but the templates are changing correctly. Also, when the editTemplate shows from clicking the edit button the #{firstName} and others show as undefined.

In my layout jade file I do include all the appropriate files, jquery, underscore,backbone and handlebar.

Here is my main.js file

(function () {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
       // Templates: {},
        Router: {}

    };

    // MODEL
    App.Models.User = Backbone.Model.extend({
        defaults: {
            firstName: 'first',
            lastName: 'last',
            email: 'Email',
            phone: '222',
            birthday: 'date'
        },

        validate: function (attrs) {
            if (!attrs.firstName) {
                return 'You must enter a real first name.';
            }
            if (!attrs.lastName) {
                return 'You must enter a real last name.';
            }
            if (attrs.email.length < 5) {
                return 'You must enter a real email.';
            }
            if (attrs.phone.length < 10 && attrs.phone === int) {
                return 'You must enter a real phone number, if you did please remove the dash and spaces.';
            }
            if (attrs.city.length < 2) {
                return 'You must enter a real city.';
            }
        },

        initialize: function() {
             this.on('invalid', function (model, invalid) {
                console.log(invalid);
            });
        }

    });



    //VIEW
    App.Views.User = Backbone.View.extend({
        model: App.Models.User,
        el: 'user',
        //tagName: 'div',
        //id: 'user',
        //className: 'userProfile',


        initialize: function (){

        },

        render: function() {
            var template = Handlebars.compile($("#userTemplate").html());
            var editTemplate = Handlebars.compile($("#userEditTemplate").html());

            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },

        events: {
            'click button.edit': 'editProfile',
        //  'click button.save': 'saveEdits',
            'click button.cancel': 'cancelEdits'
        },

        editProfile: function () {
            this.$el.html(this.editTemplate(this.model.toJSON()));

        }, 


        cancelEdits: function() {
            this.render();
        }

    });
    //start history service
    Backbone.history.start();

    var user = new App.Views.User({model: new App.Models.User()});
    user.render();
})();

Here is my jade file

extends layout
block content   
    div.centerContent
        script(type="text/javascript", src="/js/main.js")

        h4 User goes here with equal before it no space
            div#user
                p #{firstName} #{lastName}
                p #{email}
                p #{phone}
                p #{birthday}
                button.edit Edit



        script(id="userTemplate", type ="text/template")
                p #{firstName} #{lastName}
                p #{email}
                p #{phone}
                p #{birthday}
                button.edit Edit

        script(id="userEditTemplate", type ="text/template")
            div
                form(action="#")
                    input(type="text", class="firstName", value=#{firstName}) input(type="text", class="lastName", value=#{lastName})
                    input(type="email", class="email", value=#{email})
                    input(type="number", class="phone", value=#{phone})
                    input(type="date", class="birthday", value=#{birthday})
                button.save Save
                button.cancel Cancel
        hr

layout jade file

doctype 5
html
    head
        title=title
        link(rel='stylesheet', href='/css/style.css', type='text/css')
        link(rel='stylesheet', href='/css/bootstrap-responsive.css')
        link(href='/css/bootstrap.css', rel='stylesheet', type='text/css')
        link(href='/css/font-awesome.min.css', rel='stylesheet', type='text/css')
        script(src='/js/jquery.min.js', type='text/javascript')
        script(src='/js/jquery.validate.min.js', type='text/javascript')
        script(src='/js/script.js', type='text/javascript')
        script(src='/js/underscore.min.js', type='text/javascript')
        script(src='/js/backbone.min.js', type='text/javascript')
        script(src='/js/handlebars.js', type='text/javascript')
    body
        div#container
            div#header
            block content 
            include footer