1

サーバー（2行のphpコード）からデータをフェッチして、いくつかのデータ（3つのプロパティしかない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);

問題は、サーバーから送信しているデータ（$ user）がindex.htmlページ、コンソール（google chrome）に表示されないことです。

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

（コンソールのBIG数値​​はミリ秒単位の時間です。）しかし、コンソール出力のコードを変更した場合（モデルを表示するだけです）
（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での最初の質問なので、私が提供した情報では不十分だと思われる場合は、さらに必要な情報をお気軽にお問い合わせください。

前もって感謝します。

4

1 に答える 1

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);
}
于 2012-10-22T09:17:11.420 に答える