2013-01-08 76 views
1

我試圖在使用骨幹網和JQM的項目中創建覆蓋面板。覆蓋面板應該像在JQM文檔中描述的例子:帶Backbone.js和JQuery Mobile的覆蓋面板

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-panels.html

我的項目,該項目是基於第一步教程骨幹和JQM,採用骨幹路由。正常的路線changePage()運作良好。我只是無法讓覆蓋面板工作。

我爲我的項目創建了一個git存儲庫。如果我點擊標題中的「菜單」按鈕,覆蓋面板應該像上面的演示一樣滑入。

https://github.com/Devthias/BackboneJQM.git

裏面我的路由器我試圖設置數據角色屬性彈出bevor調用changePage功能。

var AppRouter = Backbone.Router.extend({ 

routes:{ 
    "":"home", 
    "settings":"settings", 
    "menuPanel":"menuPanel" 
}, 

initialize:function() { 
    // Handle back button throughout the application 
    $('.back').live('click', function(event) { 
     window.history.back(); 
     return false; 
    }); 
    this.firstPage = true; 
}, 

.... 

menuPanel:function(){ 
    console.log('#menuPanel'); 
    this.openPopup(new MenuPanelView()); 
}, 

changePage:function (page) { 
    $(page.el).attr('data-role', 'page'); 
    page.render(); 
    $('body').append($(page.el)); 
    var transition = $.mobile.defaultPageTransition; 
    $.mobile.changePage($(page.el), {changeHash:false, transition: transition}); 
}, 

openPopup:function (page){ 
    $(page.el).attr('data-role', 'popup'); 
    page.render(); 
    $('body').append($(page.el)); 
    var transition = $.mobile.defaultPageTransition; 
    $.mobile.changePage($(page.el), {}); 
} 

});

有人知道我做錯了什麼,可以幫助我嗎?

非常感謝!

+0

你可能想要嘗試將'page'傳遞給'openPopup'。 – fbynite

+0

是的,你是對的。我錯過了openPopup函數中的頁面參數(更新了存儲庫),但覆蓋面板仍未顯示。現在該網站轉換爲空白頁面。 – Danny

回答

0

一個變化頁是definitly了錯誤的舉動..

對我來說,開始儘快工作,我已經把我的模板的佔位符:

<div data-role="page">  
    <div data-role="content"> 

    ... 

    <div data-role="popup" id="myPopup" data-history="false"> 
     <span>&nbsp;<span> 
    </div> 
    </div> 
</div> 

,然後我的路由器我做了這樣的事情:

openPopup:function (page){ 
    $('#myPopup').html($(page.el)).popup('open'); 
}