CODEWITHSUNDEEP
backbone.jshandlebars.js
user1682815
user1682815

Reputation: 13

Can't display data using Handlebars template and BackboneJS

I have been trying to display some data(a json object with only three properties) by fetching it from server (2 lines of php code). To fetch and display that data in html page I've used BackboneJS and Handlebars template respectively. Here is the javascript code

var User = Backbone.Model.extend({
    urlRoot:"getUser/"
});

var UserView = Backbone.View.extend({
    el:$("#user"),
    initialize: function(){
        this.model.bind("change", this.render());
    },
    render: function(){
        var templateSource = $("#user-temp").html();
        var template = Handlebars.compile(templateSource);
        $(this.el).html(template(this.model));
        var newDate = new Date();
        console.log("in UserView render :: " + newDate.getTime());
        console.log(this.model.toJSON());
        //var pp = "nothing";
    }
});

var UserRouter = Backbone.Router.extend({
    routes:{
        "":"userDetails"
    },
    userDetails:function(){
        //var newUser = new User({id:1});
        var newUser = new User();
        var userView = new UserView({model:newUser});
        var newDate = new Date();
        newUser.fetch({
            success:function(){
                console.log("in router :: " + newDate.getTime());
                console.log(userView.model.toJSON());
            }
        });
    }
});

Handlebars template in index.html page

<div id="user"></div>
    <script id="user-temp" type="text/x-handlebars-template">
        <div>
            ID  {{attributes.id}}
            Name  {{attributes.name}}
            Age  {{attributes.age}}
        </div>
    </script>

PHP code

 $user = array("name"=>"Arif","id"=>"1","age"=>"100");
 echo json_encode($user);

Now the problem is I can't see the data ($user) i'm sending from server in index.html page, in console (google chrome) i've rather found this 

in UserView render() :: 1350880026092 
Object
    __proto__: Object
in router :: 1350880026097
Object
    age: "100"
    id: "1"
    name: "Arif"
    __proto__: Object

(The BIG numbers in console is time in milliseconds.) But If I change the code for console output (just showing the model)
(in UserView render() function)

console.log(this.model);

(in UserRouter userDetails() function)

console.log(userView.model);

Then the console looks like this

in UserView render :: 1350881027988
child
    _changing: false
    _escapedAttributes: Object
    _pending: Object
    _previousAttributes: Object
    _silent: Object
    attributes: Object <<======
        age: "100"
        id: "1"
        name: "Arif"
        __proto__: Object
    changed: Object
    cid: "c0"
    id: "1"
    __proto__: ctor
in router :: 1350881027995
child
    _changing: false
    _escapedAttributes: Object
    _pending: Object
    _previousAttributes: Object
    _silent: Object
    attributes: Object  <<======
        age: "100"
        id: "1"
        name: "Arif"
        __proto__: Object
    changed: Object
    cid: "c0"
    id: "1"
    __proto__: ctor

Here i can see the attributes (arrow marks <<====== )
So what am i doing wrong? Am i missing some basic concepts here? By the way, I'm new to Handlebars and BackboneJS. Moreover its my first question in stackoverflow, so if you think the info i've given isn't enough, please feel free to ask what further info you need.

Thanks in advance.

Upvotes: 1

Views: 918

Answers (1)

nikoshr
nikoshr

Reputation: 33334

You bind your model to this.render() which you means you execute your render function and then bind your model to whatever render returns (nothing, in your case).

Try 

initialize: function(){
    _.bindAll(this, 'render'); // guarantees the context for render
    this.model.bind("change", this.render);
}

or, with a more up to date syntax (see the changelog for 0.9.0 http://backbonejs.org/#changelog, bind and unbind have been renamed to on and off for clarity)

initialize: function(){
    _.bindAll(this, 'render');
    this.model.on("change", this.render);
}

Upvotes: 1

Related Questions