动态添加页面时，Jquery mobile 未应用样式

Question

您好，我有一个使用 JQM 和 Sammy 的小应用程序。我正在使用 Sammy 动态加载页面并附加到我的 index.html 的正文中。问题是我没有看到 JQM 主题被应用，控制台也没有错误。

这有什么原因吗？我确实打电话给以下

 context.render('view/abc.template')
                .appendTo(context.$element(),function(){
                    $(document).ready(function () {
                        $("#container").trigger('pagecreate');
                    });
                });

谢谢

Answer 1

我就是这样做的；

1) 首先我在一个名为 plugins.js 的文件中禁用了我的 JQM 路由；

$(document).bind("mobileinit", function() {
    /**
    * check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/  for more details
    */
   $.mobile.ajaxEnabled = false;
   $.mobile.linkBindingEnabled = false;
   $.mobile.hashListeningEnabled = false;
   $.mobile.pushStateEnabled = false;
}); 

这段代码是在我加载 JQM 之前加载的，就像这样；

    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/main.js"></script>

那么我的main.js函数是这样的；

(function($) {

    var app = $.sammy('#main', function() {
        this.use('Template');

        this.get('#/', function(context) {
            context.load('/templates/index.template', function() {
                $("#container").trigger('pagecreate');
            }).appendTo(context.$element());
        });

        this.get('#/landing', function(context) {
            context.load('/templates/landing.template', function() {
                $("#container").trigger('pagecreate');
            }).replace(context.$element());
        });

    });

    $(function() {
        app.run('#/');
    });
})(jQuery);

我认为您在上面的代码 sn-p 上并不遥远。注意你有你的 $(document).ready 函数作为 appendTo 的回调，它不接受回调。你会看到我的在 load() 中