带有 Backbone.js 和 JQuery Mobile 的覆盖面板答案

【问题标题】：Overlay Panel with Backbone.js and JQuery Mobile带有 Backbone.js 和 JQuery Mobile 的覆盖面板
【发布时间】：2012-12-22 04:20:14
【问题描述】：

我正在尝试使用主干和 JQM 在项目中创建覆盖面板。覆盖面板应该像 JQM 文档中描述的示例一样工作：

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

我的项目基于主干和 JQM 的第一步教程，使用主干路由。 changePage() 的正常路由运行良好。我就是无法让覆盖面板工作。

我为我的项目创建了一个 git 存储库。如果我点击标题中的“菜单”按钮，覆盖面板应该像上面的演示一样滑入。

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

在我的路由器中，我尝试将 data-role 属性设置为 popup，然后调用 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), {});
}

});

有人知道我做错了什么并且可以帮助我吗？

非常感谢！

【问题讨论】：

您可能想尝试将page 传递给openPopup。
是的，你是对的。我错过了 openPopup 函数中的页面参数。（更新了存储库）但是仍然没有显示覆盖面板。现在该网站会转换到一个空白页面。

标签： jquery mobile backbone.js popup overlay

【解决方案1】：

更改页面绝对是错误的举动..

对我来说，只要我在模板中放置了一个占位符，它就开始工作了：

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

【讨论】：