Les composants mobiles JQuery se réagissent

"JQuery Mobile Components in React"

Je suis tout à fait nouveau dans ce concept et j'ai encore besoin de comprendre. J'ai construit une application à des fins mobiles et j'ai décidé de l'envelopper dans les composants React. Mon code:

Index.html

<!DOCTYPE html> <html lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>shounds</title> <link rel="stylesheet" type="text/css" href="css/jquery.mobile.squareui.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script src="./ext/react.js"></script> <script src="./ext/jsx-transform.js"></script> <script src="//fb.me/react-with-addons-0.11.0.js"></script> </head> <body data-theme="e"> <div id="container" > <!--<div data-role="page" id="login"><div data-role="header" id="loginHeader"></div></div>--> </div> <script type="text/jsx" src="./comp/main.js"></script> </body> </html>

Main.js // réagir aux composants

 var App = React.createClass({ render: function () { return Page({id: 'login'}); } }) var Page = React.createClass({ constants: { dataTheme: 'e' }, render: function () { return React.DOM.div({ id: this.props.id + 'Page', 'data-role': 'page', 'data-theme': this.constants.dataTheme }, Header({ dataTheme: this.constants.dataTheme, id: this.props.id })) } }) var Header = React.createClass({ render: function(){ return React.DOM.div({'data-role': 'header', 'data-theme': this.props.dataTheme, id: this.props.id+'Header' }) } }) // Render application. React.render(App(null), document.getElementById('container'))

Le DOM est créé dans le conteneur div comme prévu.

C'est mon problème:

JQM n'est probablement pas conscient de la création de DOM virtuel créée par React et crée une page initiale par elle-même en dehors de la division conteneur. Même si le DOM est créé correctement, il ne sera pas affiché en tant que page JQM avec En-tête.

Quelqu'un at-il traversé les mêmes choses?

Merci d'avance.

EDIT: si cela aide de quelque façon que ce soit -> c'est ce qui est créé pendant l'exécution

  <head></head> <body class="ui-mobile-viewport ui-overlay-a" data-theme="e"> <div class="ui-page ui-page-theme-a ui-page-active" data-role="page" data-url="/E:/dev/workspace/visual/shounds/index.html" tabindex="0" style="min-height: 483px;"> <div id="container"> <div id="loginPage" data-reactid=".0" data-theme="e" data-role="page"> <div id="loginHeader" data-reactid=".0.0" data-theme="e" data-role="header"></div> </div> </div> <script src="./comp/main.js" type="text/jsx"></script> </div> <div class="ui-loader ui-corner-all ui-body-a ui-loader-default"></div> </body> </html>

Mettre à jour

Appliquer les styles suivants pour supprimer la hauteur supplémentaire en page et l'adapter à la fenêtre , puisque le système de paiement n'est plus le body .

 .ui-mobile body { height: auto; /* reset height */ } #container { height: 99.9%; /* new viewport (pagecontainer) */ }

Première étape, vous devez informer le cadre (jQuery Mobile) que vous souhaitez utiliser un wrapper de pages différentes ( :mobile-pagecontainer ) que le body par défaut. En outre, vous devez désactiver l'initialisation automatique de jQuery Mobile jusqu'à ce que React rend la page et appuyez sur DOM. Ces étapes doivent être exécutées sur mobileinit qui est le premier événement qui se déclenche avant que jQuery Mobile ne soit initialisé. Aussi, notez que cela doit être placé après jQuery Core et avant jQuery Mobile en head .

 $(document).on("mobileinit", function(e, data) { $.mobile.autoInitializePage = false; /* disable auto-initialization */ $.mobile.pageContainer = $("#container"); /* set new "pagecontainer" */ });

Ensuite, exécutez votre code $.mobile.initializePage(); suivi de $.mobile.initializePage(); Pour initialiser le cadre.

Démonstration