如何應用CSS動態加載的HTML內容（jQuery Mobile的+骨幹+ PhoneGap的）

我有一個系統設置類似下面如何應用CSS動態加載的HTML內容（jQuery Mobile的+骨幹+ PhoneGap的）

的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）。第（）這個應用CSS，但很多其他的東西都壞了。

來源

2013-08-04 user2412555

這應該是一個CSS問題 –

你的css是什麼？ –

你試過'$（'pageID'）。trigger（'pagecreate'）;'注入物品後？ – Omar

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-05 05:05:25 krishgopinath

感謝從這裏刪除.html $ el是一個很棒的提示，我也被迫沒有data-role ='page'，並在它們工作之後直接將它附加到body。 – user2412555

好。請將此標記爲您認爲這對您有幫助的答案。 – krishgopinath

如何應用CSS動態加載的HTML內容（jQuery Mobile的+骨幹+ PhoneGap的）

回答

相關問題