转换事件后未呈现视图

Posted 2023-05-09

【中文标题】转换事件后未呈现视图

【英文标题】：Views not rendered after transition event

【发布时间】：2014-03-30 20:00:52

【问题描述】：

我目前正在尝试使用骨干网、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的链接。

【问题讨论】：

很高兴您设置了一个 Github 存储库，但是您可以发布链接吗？ :)

噢！添加它。谢谢... :)

试试$('body').enhanceWithin();。

@Omar：感谢您的回复。我在 page.render() 之后添加了它，并在 $(":mobile-pagecontainer") 之后也尝试了它。遗憾的是没有成功。

你试过这样$("body").append($(page.el)).enhanceWithin();吗？

【参考方案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();
  );

);

谢谢你的帮助。