Lion789
Lion789

Reputation: 4482

Getting a type error on my Backbone file?

so I will include the error along with my main.js file, if anyone can tell me what it is refering to? I think it is the templates but I cannot figure out what I am doing wrong.

Main.js file:

(function(){

    //app can be the name of the project/app
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Templates: {},
        Routes: {}

    };
    window.template = function (id) {
        return _.template($('#' + id).html());
    };

    //Can get rid of the Collection and views out of the names of each
    //User Model
    App.Models.User = Backbone.Model.extend({
        defaults: {
            firstName: 'J.R.',
            lastName: 'Smith',
            email: '[email protected]',
            phone: '212-424-6234',
            birthday: '03/05/1982',
            city: 'New York'

        },


        location: function(){
            return this.get('firstName') + ' ' + this.get('lastName') + 'is currently in ' + this.get('city') + '.';
        },

        validate: function(attrs) {
            if(!attrs.firstName) {
                return 'You must enter a real name.';
            }
            if(!attrs.lastName) {
                return 'You must enter a real 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, error){
            console.log(error);
            //when setting a user user.set('age', -55, {validate : true}); the validate true makes sure it validates
            });
        }

    });

    // list of users

    App.Collections.UsersCollection = Backbone.Collection.extend({
        model: App.Models.User

    });

    //User View
    App.Views.UserView = Backbone.View.extend({
    tagName: 'li',

    events: {
        'click .edit': 'edit'
    },

    edit: function() {

    },

    template: template('userTemplate'),

    initialize: function() {
        console.log("Render");
        this.render();

    },

    render: function() {
        var template = this.template(this.model.toJSON());
        this.$el.html(template);
        return this;
        //always return this on render methods
    }

    }); 

    // view for users
    App.Views.UsersView = Backbone.View.extend({
        tagName: 'ul',

        initialize: function() {

        },

        render: function() {
            this.collection.each(function(user) {
                //user is the model associated to the new created user
                var userView = new App.Views.UserView({model: user});
                this.$el.append(userView.el);
            }, this);
            return this;
        }
    });



    /*var user = new App.Collections.UsersCollection(  );
    var usersView = new App.Views.UsersView( users );

    $( document.body ).append( usersView.render().el );
    */
})();

This is the jade file:

extends layout

block content
    h1= title
    p Welcome to #{title}
    script(src='/js/main.js', type='text/javascript')
    script(id='userTemplate', type='text/template')
        <%=firstName%>
        button.edit Edit
        <%=lastName%>
        button.edit Edit
        <%=email%>
        button.edit Edit
        <%=phone%>
        button.edit Edit
        <%=birthday%>
        button.edit Edit
        <%=city%>
        button.edit Edit

Upvotes: 1

Views: 68

Answers (1)

dcarson
dcarson

Reputation: 2853

I don't think you are passing the JSON model to the template function.

Have you tried amending the code as follows:

Global templating function

window.template = function (id, model) {
    return _.template($('#' + id).html(), model);
}; 

In your UserView

template: function() {
    template('userTemplate', this.model.toJSON());
}

render: function() {
    var template = this.template();
    this.$el.html(template);
    return this;
    //always return this on render methods
}

Upvotes: 1

Related Questions