0

我有如下系统设置

Phonegap Backbone 用于路由 Jquery + jquerymobile 用于 dom 操作和 UI

在主干视图中，我从文件中动态加载模板，并尝试将其注入到 html 中，但是在页面加载后，没有 css 应用于动态注入的内容。我尝试了 page() 等的所有内容，但没有任何效果

这是我的代码

看法

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，但是很多其他的东西都坏了。

4

1 回答 1

0 
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 效果最好。

希望这可以帮助！

于 2013-08-05T05:05:25.473 回答