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

在这里我可以看到属性（箭头标记＆lt;＆lt; ======）
那我做错了什么？我在这里错过了一些基本概念吗？顺便说一句，我是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的更改日志），为了清晰起见，绑定和取消绑定已重命名为on和off）

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

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

1 个答案: