Question

我的系统设置类似于以下

的PhoneGap 用于路由的骨干 Jquery + jquerymobile用于dom操作和UI

在骨干视图中，我正在从文件中动态加载模板，并尝试将其注入到html中，但是在加载页面后，没有css应用于动态注入的内容。我尝试了从页面（）等所有内容，没有任何工作

这是我的代码

视图

define(['jquery', 'underscore', 'backbone',
        'text!services/main/template/Main.html'
        ], function($, _, backbone, tpl) {

    var el_selector = '#main_container';

    backbone.View.prototype.close = function() {
        alert('close for mainview');
        this.remove();
        this.unbind();
        if (this.onClose) {
            this.onClose();
        }
    };

    var MainView = backbone.View.extend({
        //always initialize el for which element to add the template to
        id : 'main_container', //jquery select
        initialize : function() {
            this.page_id = "#main_template_wrapper";
            this.holder ="#page_holder";
            this.status = 1;
            this.needUpdate = true;
        },
         // Event Handlers
        events: {
            //"click #example": "promptUser"
        },
        promptUser: function() {
            //prompt("Isn't this great?", "Yes, yes it is");
        },
        render : function() {
            alert('render main');
            try {
                var template = _.template(tpl);
                this.$el.html(template).page(); //append to the selector or perform other jquery dom manipulation option
                this.$el.attr('data-role','page');
                $(this.holder).html(this.$el.html());
                //$('body').append(this.$el.html());
                return this;
            } catch (error) {
                DEBUG(MSG_TYPE_ERROR,'render mainview error'+error.message,'MainView');
            }
        }
    });
    return (MainView);
});

路由器

//jquery changepage
        changePage: function (page, page_reverse, page_transition) {
            alert('change page called '+page.page_id);
            try {
page.render();
$.mobile.changePage($(this.currentView.el), {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});
            } catch (error) {
                DEBUG(MSG_TYPE_ERROR,' change page error in router >> '+error.message+' : '+error.stack,'AppRouter');
            }
        }

html我尝试注入

<div id="main_template_wrapper">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>title</h1>
    </div><!-- /header -->
    <div data-role="content" data-theme="a">
        <a href='#userprofile' data-role="button">userprofile</a>
        <a href='#login' data-role="button">login</a>
        <a href='#tutorial/1/1' data-role="button">tutorial</a>
        <a href='./spec.html'>Jasming</a>
    </div><!-- /content -->
    <div data-role="footer" data-id="fool" data-position="fixed" data-theme="b">
        <div data-role="navbar">
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>

注入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=false">
    <script type="text/javascript" src="js/library/phonegap/cordova.js"></script>
    <!-- Load jquery css files -->
    <link rel="stylesheet" type="text/css" href="css/library/JQuery/jquery.mobile-1.3.2.min.css">
    <!-- use require.js to load system -->
    <script data-main="js/main.js" src="js/library/require/require.js"></script>
    <!-- <script data-main="js/jm_requirejs_test.js" src="js/library/require/require.js"></script> -->
    <title>Title</title>
</head>
<body class="main_body">
<div id="page_holder">
</div>
</body>
</html>

请帮助，我尝试了所有可能的组合使用页面，甚至做了$（document）.page（）这个应用了css，但很多其他东西都被打破了。

Answer 1

this.$el.html(template).page();

代码中的上一行使用了不推荐使用的jQM方法。从此行中删除page()。无论如何你不需要这样做。你只是把它注入DOM。 changePage将负责自动初始化该页面的样式。

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

删除此行并在模板中添加data-role=page，如下所示：

<div id="main_template_wrapper" data-role="page">

接下来，看看这一行：

$(this.holder).html(this.$el.html());

在这一行中，this.$el会这样做。移除对html()的电话。

$.mobile.changePage($(this.currentView.el),..

在上面一行中，$(this.currentView.el)可以成为页面的id。 changePage最适合使用ID。

希望这有帮助！

如何在动态加载的html内容上应用css（jquery mobile + backbone + phonegap）

1 个答案: