Question

我目前正在尝试使用backbone，require.js和amp;来构建应用程序。 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});

}});

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

我觉得在我身边存在概念上的误解，我无法弄清问题所在。我试过像.trigger("create")这样的东西，但看起来像是一个无助的试用而不是其他任何东西。

我已经建立了一个GitHub-Repository。我很感谢任何帮助 - 提前感谢并为这个困惑的问题感到抱歉。

编辑：是的......还有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();
  });

});

感谢您的帮助。

转换事件后未呈现的视图

1 个答案: