無法顯示用把手模板和BackboneJS

我一直在試圖通過顯示從服務器獲取它的一些數據（只有三個屬性JSON對象）（2行的PHP代碼）數據。在html頁面中獲取並顯示該數據我分別使用了BackboneJS和Handlebars模板。下面是JavaScript代碼中的index.html頁無法顯示用把手模板和BackboneJS

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

把手模板

<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頁發送，在控制檯（谷歌瀏覽器）我已經相當發現這個

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

（Console中的大的數字是以毫秒爲單位的時間。）但如果我更改代碼的控制檯輸出（只顯示模式）
（在用戶視圖渲染（）函數）

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中的第一個問題，所以如果你認爲我提供的信息還不夠，請隨時詢問你需要什麼更多信息。

在此先感謝。

來源

2012-10-22 user1682815

首先，我認爲'el：$（「＃user」）這個行應該是'el：'＃user''，'[el]（http://backbonejs.org/#View-el）'屬性是DOM元素（Backbone接受jQuery選擇器來獲取它），'[$ el]（http://backbonejs.org/#View-$el）'屬性用於jQuery對象。 –

雖然'el：$（「＃user」）'仍然適用於我，我應該按照你的方式，謝謝@Ed。 – user1682815

我想我不應該提到'el'在聲明價值可言，我寧願將其值設置路由器的聲明，比如'VAR用戶視圖=新用戶視圖（{模式：NEWUSER，EL：「＃用戶」}）'或'$（「＃用戶」）。HTML（userView.render（）。EL）' – user1682815

您模型綁定到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，綁定和取消綁定已更名爲打開和關閉清晰度）

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

來源

2012-10-22 09:17:11 nikoshr

謝謝...現在它工作正常，但不是bindAll（），這我不使用的模板UnderscoreJS的方法？ – user1682815

@ user1682815 bindAll與模板無關，我添加它以確保在渲染時將此參數調用爲回調時引用了正確的視圖。 – nikoshr

無法顯示用把手模板和BackboneJS

回答

相關問題