Backbone.js Can'；t使用Handlebar模板和BackboneJS显示数据

我一直试图通过从服务器获取数据（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>

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

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

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

（在UserRouter userDetails（）函数中）

然后控制台看起来像这样

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

用户视图渲染中的

：1350881027988
小孩
_更改：错误
_EscapedAttribute:对象
_挂起：对象
_以前的属性：对象
_沉默：反对
属性：Object将模型绑定到
this.render（）
，意思是执行渲染函数，然后将模型绑定到渲染返回的任何对象（在您的情况下，没有）

试一试

或者，使用更为最新的语法（请参阅0.9.0的更改日志，为清楚起见，绑定和取消绑定已重命名为on和off）

将模型绑定到
this.render（）
，这意味着执行渲染函数，然后将模型绑定到渲染返回的任何对象（在您的情况下，没有）

试一试

或者，使用更为最新的语法（请参阅0.9.0的更改日志，为清楚起见，绑定和取消绑定已重命名为on和off）

首先，我认为行
el:$（“#user”）
实际上应该是
el:'#user'
，“”属性是DOM元素（主干接受jQuery选择器来获取它），“”属性是jQuery对象。虽然
el:$（“#user”）
仍然适用于我，但我应该按照你的方式，谢谢@Ed。我想我不应该在声明中提到
el
，我应该在路由器的声明中设置它的值，比如
var userView=newuserview（{model:newUser，el:“#user”}）
或
$（“#user”）.html（userView.render（）.el）
首先，我认为行
el:$（“#user”）
应该是
el:'#user'
，''属性是DOM元素（主干接受jQuery选择器来获取它），''属性是jQuery对象的属性。虽然
el:$（“#user”）
仍然适用于我，但我应该按照你的方式，谢谢@Ed。我想我根本不应该在声明中提到
el
，我更愿意在路由器的声明中设置它的值，比如
var userView=newuserview（{model:newUser，el:“#user”}）
或
$（“#user”）.html（userView.render（）.el）
谢谢。。。现在它可以正常工作了，但是bindAll（）不是一个我不用于模板制作的下划线方法吗？@user1682815 bindAll与模板制作无关，我添加它是为了确保在作为回调调用时，呈现中的这个引用了正确的视图。谢谢。。。现在它可以正常工作了，但是bindAll（）不是一个我不用于模板化的下划线方法吗？@user1682815 bindAll与模板化无关，我添加它是为了确保在作为回调调用时，在呈现中引用了正确的视图。
console.log(this.model);

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

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

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