Question

我有一个JQM应用程序，我正在整合Backbone。由于我的初始javascript代码很大，我只是提取我认为有问题的东西。我遵循建议并致电此处引用的步骤：

http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/

jqm-config.js
http://jquerymobile.com/test/docs/pages/backbone-require.html

我有一个主要问题，这就是行为，问题来自这段代码：

 var r = Backbone.Router.extend
 router: ...    
    "page": "pageDisplay"
 ...
 pageDisplay: function(){
    c = new AView();      // Backbone.View    ...fetch() data...   
    $(c.el).page();       // Call to JQM to add its extra stuff; seems done correctly
    $.mobile.changePage( "#" + c.id, {changeHash: false});       // line 50
 }

当关注<a href="#page" >的链接时，我按照预期来到了页面“#page”已正确处理。但是一旦那里，如果我点击refresh，这是由相同的路由器规则间接重新处理，我最终得到以下错误：

未捕获的TypeError：无法调用未定义的方法'trigger'

我下载了jquery移动开发代码并观察了这个：

// JQM1.1.2 - 第3772行在页面容器中显示特定页面。

  $.mobile.changePage = function( toPage, options ) {

  if ( isPageTransitioning ) { 
     pageTransitionQueue.unshift(arguments );
     return;      
  }
  var settings = $.extend( {}, $.mobile.changePage.defaults, options);

  // Make sure we have a pageContainer to work with.      
  settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
  // Make sure we have a fromPage.        
  settings.fromPage = settings.fromPage || $.mobile.activePage;
                                              // Line #3788   
  var mpc = settings.pageContainer,      // Line #3789        
      pbcEvent = new $.Event("pagebeforechange" ),
      triggerData = { toPage: toPage, options: settings };
  // Let listeners know we're about to change the current page.
  mpc.trigger( pbcEvent, triggerData );      // Line #3794

Uncaught TypeError由第3794行引起，因为mpc是undefined。因此，在JQM中，在Chrome检查器中，我还可以看到settings.fromPage是undefined而settings.pageContainer是undefined。我有点想象，JQM无法对fromPage做出假设，因此无法继续刷新。我在$ mobile.changePage（）上尝试过的所有选项都没有成功。我没有想法。

更新 /在线网站，以最小化重现问题： apartindex，access the website with the bug

任何帮助将不胜感激。

Answer 1

在dextoInit中调用调用路由器代码的$(document).ready()函数，该函数不保证jQuery移动页面实际上已成功设置。但路由器代码调用$.mobile.changePage，这取决于jQuery Mobile的初始化。

将其放入mobileinit或pageinit应该有效。

（不幸的是我无法修改代码并轻松测试。）

Answer 2

虽然，暂时解决这个问题，但它确实有缺点。见下文。

$(document).bind("pageinit", function(){
   console.log('bindtomobileinit: event pageinit received');
   if ( !window.AppNode.router ){
      window.AppNode.router = new AppNode.singletons.router();
      console.log("mobileRouter.js: Starting b history");
      console.log('mobileRouter.js: About to launch Backbone history');
      Backbone.history.start();  
   }

});

注册 pageinit 会因被解雇两次而产生奇怪的效果。我看到已经向Dom添加了2个节点：默认的“加载”jquery mobile div（与pageinit相关：1）和我的data-role page（pageinit：2）。所以在“刷新浏览器上单击”，我的情况让我等待第一个pageinit，创建一个意外的jquery mobile dom元素（创建一个默认页面来显示等待的JQM圈子动画），它触发路由器创建，并允许Backbone.history调用，然后处理我的“”主页。第二个pageinit不会干扰设置，因为我只执行一次。

我对此设置感到非常失望。我现在要离开这个问题，因为它确实有用。

Answer 3

我发现问题的根源是jquery-mobile version 1.3.0。当我回到JSM 1.2.0或1.2.1时，“Uncaught TypeError：无法调用方法'触发'未定义”问题就会消失。

BTW，我没有使用Backbone。

Answer 4

我通过使用方法append（）修复了这个问题，但没有使用html（）

$('body').append(view.render().$el);

Answer 5

我能够通过将页面数据属性从“data-role”更改为“data-mobile-page”来解决此问题，如jqm 1.3.2第4042行所引用的那样

fromPage.data( "mobile-page" )._trigger( "beforehide", null, { nextPage: toPage } );

Answer 6

设置

$.mobile.autoInitializePage = true;

在你的jquery移动配置文件中，有些地方如：

$(document).on("mobileinit", function () {...});

可能有所帮助。

在$ .mobile.changePage（）上获取错误：未捕获TypeError：无法调用未定义的方法'trigger'

6 个答案: