2012-04-13 13 views
15

Meteor está impresionado y me gustaría usarlo con jQuery-Mobile. Me gustaría saber si alguien ya ha creado una aplicación de integración de muestra. Si no, algunas pautas serían geniales.Directrices de integración y/o integración de muestra jQuery-Mobile Meteor

Saludos,

Cédric

+6

Estoy interesado en esto también y he intentado integrarlo. jQuery Mobile inicializa la página y modifica el DOM en carga. Luego, el meteorito se inicializa y agrega su propio html al DOM y a estos conflictos. Establecer '$ .mobile.autoInitializePage = false;' dentro del evento 'mobileinit' debe evitar que esto suceda. Eso es todo lo que he conseguido. Se actualizará con una respuesta si/cuando se me ocurre una muestra/guía completa. – rmarscher

+2

Simplemente ponga jquery.js y jquery-mobile.js en el directorio/client por ejemplo. De esta forma, se cargan más tarde que otros scripts. No use jquery del paquete. Intenté el paquete jquery-mobile sugerido en la otra respuesta, pero tuve más problemas debido a la orden de carga de JavaScript de Meteor. –

Respuesta

6

Me preguntaba sobre esto, así, así que hice una aplicación de ejemplo:

http://jqmdemo.meteor.com/

Y parece que funciona bien. Puede encontrar el código fuente aquí:

https://github.com/snez/jqm-meteor

Hay algunas trampas al usar los dos juntos, ver los comentarios en el código.

ACTUALIZACIÓN: Parece que meteor.com está implementando mejoras en el marco meteorológico, rompiendo el código anterior allí. Utilice este proyecto como referencia solo porque hay mejores formas de hacer lo mismo con las versiones de framework más recientes.

+0

Genial, buen trabajo! –

+0

Esta aplicación no funciona. Me sale 'actualización fallida: acceso denegado'. Como resultado, no puedo verificar que esto realmente solucione el problema mencionado por @rmarscher: si tiene dos navegadores abiertos y modifica los valores en uno, meteor actualizará el html y destruirá los cambios de jQuery mobile. – jchook

+0

Para obtener información, una versión actualizada y funcional de la demostración está disponible en http://jqmdemo.meteor.com/ –

3

Sugiero tomar un vistazo al paquete de jQuery en la carpeta /packages/jquery.

Todo lo que hace es agregar el archivo jquery.js a la pila de archivos para enviarlo al cliente. Si lo desea, puede agregar su propio paquete llamado jquery-mobile e incluir los archivos que necesita.

Ver el archivo package.js de cómo funciona:

https://github.com/meteor/meteor/blob/master/packages/jquery/package.js 

Entonces sólo tiene que añadir los archivos móviles en su paquete de jQuery-móvil y hacer algo como:

Package.on_use(function (api) { 
    api.add_files('jquery.mobile-1.1.0.min.css', 'client'); 
    api.add_files('jquery.mobile-1.1.0.min.js', 'client'); 
}); 
+0

Ah, y luego inclúyalo en tu aplicación usando "Meteor add" o agrégalo al archivo .meteor/packages en tu directorio de aplicaciones – jonathanKingston

+0

Además, si lees la respuesta de N1mmy a uno de los desarrolladores de Meteor, sugiere que la API cambiará: http://stackoverflow.com/questions/10114526/how-to-build-a-meteor-package Así que podría sugerir que solo incluyes los archivos localmente en un archivo js en tu plantilla. – jonathanKingston

4

que no estaba capaz de hacer que jQuery Mobile funcione inicialmente cuando intenté agrupar los archivos de marcos en el directorio de clientes. Meteor arrojaba un error en los archivos JS que intentaban establecer el DOCTYPE, incluso los archivos en la carpeta de ejemplos a los que nunca se hizo referencia. Al usar la versión alojada en CDN y deshabilitar autoInitializePage como se menciona en un comentario anterior, lo hice funcionar sin acceder a ninguna API no documentada.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
<script type="text/javascript"> 
    $(document).bind("mobileinit", function(event, data){ 
      $.mobile.autoInitializePage = false; 
    });  
</script>