转换事件后未呈现视图

Question

我目前正在尝试使用骨干网、require.js 和 jqm 构建一个应用程序。我是 jquery mobile 的新手，我遇到了奇怪的渲染问题，我无法追踪或修复它们。所以我的问题仍然是一个相当模糊和惊人的水平——希望有人能在这里帮助我。我觉得我在这里理解了一些错误。

这就是我要做的： 基本上我正在使用backbone.js 的路由器设施并禁用jqm 的所有路由功能。使用（在 main.js 中）：

$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;

之后我使用了Christophe Coenraets 在他的博客上提出的路由技术。基本上是这样的：

var AppRouter = Backbone.Router.extend({

// Router constructor
initialize: function(){
  this.loginView = new LoginView(this);
  this.registerView = new RegisterView(this);
  this.user = new User(this);

  // Tell Backbone to listen for hashchange events
  Backbone.history.start();
},    

// Define routes
routes: {
  '': 'home',
  'login' : 'login',
  'registration' : 'registration',
},

/// Define route actions ///
// Home route
home: function() {
   this.user.isUserLoggedIn();
},
// Login route
login: function() {
  console.log("Welcome to the router - login route.");
  this.changePage(this.loginView);
},

registration:function() {
  console.log("Welcome to the router - registration route.");
  this.changePage(this.registerView);
},

changePage:function (page) {
    $("body").empty();

    $(page.el).attr('data-role', 'page');

    $("body").append($(page.el));

    page.render();
    $(":mobile-pagecontainer").pagecontainer("change", $(page.el), {transition: "pop", changeHash: false, reverse: false});

}});

基本上我要查看：目前的登录和注册视图。当我导航到 RegisterView 时它工作正常，但向后导航到登录我可以看到转换（“pop”） - 但转换后内容不会显示在浏览器中。它存在于 DOM 中，但我发现缺少某些 css 类，例如 data-role="page" 上的 "ui-page-active"。当我手动应用该类时，我可以看到 LoginView，但所有事件都丢失了（单击注册选项卡不会触发任何事情）。

我感觉自己存在概念上的误解，我无法弄清楚问题出在哪里。我尝试了.trigger("create") 之类的东西，但这看起来更像是一种无助的尝试。

我已经建立了一个 GitHub 存储库。感谢您提供任何帮助 - 提前感谢您对这个困惑的问题表示抱歉。

编辑：是的……这里还有repo的链接。

Answer 1

我想通了，我把防止 jqm 的配置放在了错误的地方。在加载实际应用程序之前，它必须驻留在 main.js 中：

require(["jquery"], function( $ ){
    $( document ).one( "mobileinit", function() {
        //Set your configuration and event binding
        $.mobile.ajaxEnabled = false;
        $.mobile.linkBindingEnabled = false;
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;
    });


  require([
    // Load our app module and pass it to our definition function
    'app',

  ], function(App){

    // The "app" dependency is passed in as "App"
    // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
    App.initialize();
  });

});

谢谢你的帮助。