CODEWITHSUNDEEP
javascriptnode.jsbackbone.jspug
Vijay Singh
Vijay Singh

Reputation: 277

Backbone constructor not working

I'm trying a simple backbone program using express which dispalys name and twitter handle and allows its update by using a template in jade. However, its not working.

Here is my server.js file:

var express= require("express"),
bodyparser= require("body-parser");

var app= express();

app.use(express.static(__dirname+ "/public"));
app.use(bodyparser.json());

app.get("/", function(req, res){
    res.render("index.jade");
});

app.listen(3002);

Here is my index.jade file: 

doctype html

#main

script(type="text/template" id="showuser")
    <h1> <%= name %> </h1> 
    <p>Twitter: <a href='"http://twitter.com/"<%= twitter %>'> <%= twitter %> </a> </p>

script(type="text/template" id="edituser")
    <h1> Editing </h1> 
    <p> Name: <input type="text" name="name" id="name" value="<% name %>" /> </p>
    <p> Twitter Handle: <input type="text" name="twitter" id="twitter" value="<% twitter %>" /> </p>
    <p> <button> Update </button> </p>

script(src= "jquery.js")
script(src= "underscore.js")
script(src= "backbone.js")
script(src= "theapp.js")

Here is my theapp.js file: 

var User= new Backbone.Model.extend({});

var Showview= new Backbone.View.extend({
    template: _.template($("#showuser").html()),
    initialize: function(){
            this.model.on("change", this.render, this);
    },
    render: function(){
            this.$el.html(this.template(this.model.toJSON()));
            return this;
    }
});

var Editview= Backbone.View.extend({
    template: _.template($("#edituser").html()),
    events: {
        "click button": "savechange"
    },
    render: function(){ 
            this.$el.html(this.template(this.model.toJSON()));
            return this;
    },
    savechange: function(){
            this.model.set({name: $("#name").val(), twitter: $("#twitter").val()});
    }
});

var me= new User({name: "Anna", twitter: "anna9090"}),
showview= new Showview({model: me}),
editview= new Editview({model: me});

$("#main").append(showview.render().el).append(editview.render().el);

I am getting an error: undefined is not a function on the line:

var me= new User({name: "Anna", twitter: "anna9090"}),

in the file theapp.js

Upvotes: 0

Views: 96

Answers (1)

Ram
Ram

Reputation: 144669

You should remove the new operator when you are extending the Backbone Model.

var User = Backbone.Model.extend({});
// ...
var me = new User({name: "Anna", twitter: "anna9090"}),

Upvotes: 1

Related Questions