无法使用 Handlebars 模板和 BackboneJS 显示数据

Question

我一直在尝试通过从服务器（2 行 php 代码）获取数据来显示一些数据（一个只有三个属性的 json 对象）。为了在 html 页面中获取和显示该数据，我分别使用了 BackboneJS 和 Handlebars 模板。这是javascript代码

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());
            }
        });
    }
});

index.html 页面中的把手模板

<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 代码

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

现在的问题是我在 index.html 页面中看不到我从服务器发送的数据（$user），在控制台（谷歌浏览器）中我宁愿找到这个

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

（控制台中的大数字是以毫秒为单位的时间。） 但是如果我更改控制台输出的代码（仅显示模型）
（在 UserView 的 render() 函数中）

console.log(this.model);

（在 UserRouter userDetails() 函数中）

console.log(userView.model);

那么控制台是这样的

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

在这里我可以看到属性（箭头标记 那我做错了什么？我在这里缺少一些基本概念吗？顺便说一句，我是 Handlebars 和 BackboneJS 的新手。此外，这是我在 stackoverflow 中的第一个问题，所以如果您认为我提供的信息还不够，请随时询问您需要什么进一步的信息。

提前致谢。

Answer 1

你将你的模型绑定到this.render()，这意味着你执行你的渲染函数，然后将你的模型绑定到任何渲染返回（在你的情况下什么都没有）。

试试

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

或者，使用更新的语法（请参阅 0.9.0 http://backbonejs.org/#changelog 的更新日志，为清楚起见，bind 和 unbind 已重命名为 on 和 off）

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