cordova - 无法在 phonegap + Backbone 应用程序中呈现 jquery 移动样式

标签 cordova jquery-mobile backbone.js requirejs

我已经使用 backbone 在 phonegap 中开发了一个应用程序,需要 js。 jquery mobile js是从主js加载的。

据我所知,require js 会为我加载所有 js。所以我不必使用 <script> 手动加载它们在我的 index.html

我不想看什么?有没有一种特定的方法可以在 phonegap + backbone 中加载 jqm 我在这里加载了 jqueryMobile 库。

require.config( {
  paths: {
        "jquery": "libs/jquery",
        "jquerymobile": "libs/jquerymobile",
        "underscore": "libs/lodash",
        "backbone": "libs/backbone"
  },
  shim: {

        "backbone": {
              "deps": [ "underscore", "jquery" ],
              "exports": "Backbone"  //attaches "Backbone" to the window object
        }
  }} );
require([ "jquery", "backbone", "routers/mobileRouter" ], function( $, Backbone, Mobile ) {
$( document ).on( "mobileinit",
    function() {
        $.mobile.linkBindingEnabled = false;
        $.mobile.hashListeningEnabled = false;
    }
)
require( [ "jquerymobile" ], function() {
    this.router = new Mobile();
}); } );

这是我的 index.html head .因为我最初是在加载我的移动 js,所以我不需要标题中样式的 jqm 脚本。

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>RideSmart App</title>
<script src="js/libs/require.js" data-main="js/mobile"></script>
<link rel="stylesheet" href="css/jqm1.3.0.min.css" />
<script type="text/javascript" charset="utf-8" src="jsLib/phonegap.js"></script>  
</head>

最佳答案

我认为您需要在 Backbone 呈现页面后触发页面上的 'create' 事件,如文档“增强新标记”部分中的建议 here .

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

如果您使用 Marionette您可以覆盖它提供的 onRender Hook 以自动执行此操作。像这样:

// Override Marionette onRender and onShow events so JQM 'create' event is
// triggered on view's element. This ensures dynamically created content
// is given the jQuery Mobile treatment
Marionette.View.prototype.onRender = Marionette.View.prototype.onShow = function() {
  this.$el.trigger('create');
  return this;
};

关于cordova - 无法在 phonegap + Backbone 应用程序中呈现 jquery 移动样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15080974/

相关文章:

javascript - parse.com REST API 使用 build.phonegap Javascript 推送通知 Android 和 iOS

android - Cordova-plugin-camera 不适用于 Android 版本 8

javascript - 本地存储与 Web SQL

jquery mobile 添加 listview 到 "navbar in footer "

javascript - 如何多次调用locationManager.requestWhenInUseAuthorization函数? Cordova

ios - Cordova 应用程序在 safari 上运行良好,但作为应用程序安装时崩溃

JQuery.Validate 添加带有消息的动态规则

javascript - 主干各未定义

javascript - Backbone 示例应用程序和 javascript 适用

javascript - Routing.navigate 与 document.location.hash