2013-01-11 75 views
0

正在構建一個包含jQuery Mobile,backbone和require.js的移動Web應用程序以使其成爲模塊化。 我有一個這樣的HTML頁面;骨幹視圖無法在pagecreate事件上呈現

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>DoIt</title> 
    <link href="jqm/jquery.mobile-1.2.0.css" rel="stylesheet"> 

    <script charset="utf-8" src="jqm/jquery-1.7.2.min.js"></script> 
    <script charset="utf-8" src="jqm/jquery.mobile-1.2.0.min.js"></script> 
    <script charset="utf-8" src="libs/require.js" data-main="app"></script> 

</head> 

我app.js文件看起來像這樣

//Require.js configuration 
require.config({ 
    paths: { 
     'underscore': 'libs/underscore-min', 
     'backbone': 'libs/backbone-min', 
     'text': 'libs/text' 
    }, 
    shim: { 
     'backbone': { 
      deps: ['underscore'], 
      exports: 'Backbone' 
     } 
    } 
}); 

require(['backbone', 'views/main'], function (Backbone, AppView) { 
    'use strict'; 
    var view = new AppView(); 

    $(document).bind('pagecreate', function() { 
     view.render(); 
    }); 
}); 

這對於

<script type="text/html" id="app-view-tmpl"> 
    <div id="task-creator"> 
     <input type="text" id="task" placeholder="Enter a task"> 
     <button data-role="button" data-theme="b"> 
      Create task 
     </button> 
    </div> 
     </script> 

我使用「pagecreate」事件視圖模板觸發視圖的渲染。 該視圖不呈現,但我設置記錄到視圖初始化的控制檯的其他細節記錄。 我做錯了什麼?

回答

0

我對backbone.js知之甚少,但是在構建它們之後是否「清爽」了你的小部件?

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html

$("#myListView").listview("refresh");

$("#myButton").button("refresh");

這應該是你pagecreate邏輯的一部分。在你的模板上獲得一些額外的細節會很有幫助。

+0

我正在使用下劃線模板 – MrFoh

+0

你能分享你的模板嗎? jQuery Mobile高度依賴於標記,並且您沒有提供任何標記。謝謝, – andleer

+0

我用模板更新了問題 – MrFoh