Question

我正在尝试使用骨干和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属性设置为弹出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), {});
}

}）;

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

非常感谢！

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

使用Backbone.js和JQuery Mobile叠加面板

1 个答案: