2012-08-14 22 views
20

Estoy empezando con el desarrollo de Windows 8 usando HTML/JS. Pasé los últimos meses inmerso en el desarrollo de jQuery para aplicaciones dirigidas a unidades principales y televisores de vehículos.Creando una aplicación Windows 8 Metro con jQuery

Saltando en esto, pensé que la transición sería simple. Tengo el diseño y la estructura de mi sitio todo resuelto en su mayor parte y esperaba seguir algunas de las prácticas que había estado utilizando para mi trabajo anterior.

Es decir, quiero crear esencialmente una aplicación de una sola página. El archivo principal default.html albergará la navegación/título superior y otro div. El otro div se usará para cargar en todas las otras páginas, todos los archivos HTML separados dentro del proyecto.

Todas las funciones globales y la funcionalidad principal residirán en un archivo javascript, application.js. Entonces, cualquier javascript específico de la página residirá en la parte superior de cada archivo HTML.

Me estoy dando cuenta rápidamente de que esto es un problema. Usar jQuery.load() para cargar en mis páginas provoca errores de seguridad en mi aplicación.

JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.

Tenía muchas ganas de evitar tener que aprender un montón de cosas específicas de Microsoft. Creo que es genial que hayan proporcionado muchas herramientas y lo que no, y tal vez simplemente no las he usado lo suficiente, pero todo se siente demasiado rígido para mí y para lo que estoy tratando de hacer o ya se puede lograr con jQuery. Soy uno que le gusta saber EXACTAMENTE lo que está sucediendo y tener un control total sobre él.

También mirando a través de las plantillas y ejemplos de proyectos, realmente no me gusta todo el código repetido. Por ejemplo, cada archivo HTML que declara todas las mismas referencias. Quiero escribir mis referencias y secciones como mi barra de título una sola vez, y no tener que copiar/pegar ese código en todo mi proyecto.

¿Hay alguna manera de hacer las cosas como esperaba y crear una aplicación de una sola página? ¿Tienen su propio sustituto para .load() de jQuery?

¡Cualquier ayuda que me señale en la dirección correcta sería muy apreciada!

EDITAR 8/14/2012:

He intentado usar el arreglo de esta pregunta: ¿ Using jQuery with Windows 8 Metro JavaScript App causes security error

Esto se deshace de la advertencia de seguridad y que puede cargar en HTML usando jQuery.load() . Sin embargo, mirando DOM Explorer, mi HTML se está despojando de mis scripts.

También he intentado envolver mi llamada .load() dentro de MSApp.execUnsafeLocalFunction(), pero una vez más mi archivo aún se despoja de todos los scripts. ¿Lo que da?

+2

+1 para alertar de que la carga de jQuery posiblemente no está "permitida" en Windows 8, ¡no puedo esperar para ver la respuesta a esta pregunta! –

+0

Posible duplicado de [El uso de jQuery con la aplicación Metro de Windows 8 causa un error de seguridad] (http://stackoverflow.com/questions/10859523/using-jquery-with-windows-8-metro-javascript-app-causes-security- error), la pregunta también tiene una respuesta que podría ayudar. – nfechner

+0

Probé esa solución. Ya no recibo los errores, pero los scripts de mis páginas cargados todavía no se ejecutan. – Danny

Respuesta

3

Hay una manera "formal" para hacer lo que está buscando.
WinJS.Navigation se proporciona para admitir "aplicaciones de una sola página". Por ejemplo, el default.html contendría un margen de beneficio que representaría en el que el contenido de la página cargada dinámicamente iría:

<div id="contenthost" 
    data-win-control="Application.PageControlNavigator" 
    data-win-options="{home: '/pages/home/home.html'}"> 
</div> 

En el ejemplo anterior, la página de contenido real cargado está en /pages/home/home.html

En controladores de eventos, se simplemente puede hacer lo siguiente para load o navegar a otra página:

WinJS.Navigation.nav("/pages/other/page.html"); 

es cierto que no es jQuery, pero funciona muy bien :)

+0

Supongo que esta es mi única ruta en ese momento. Ahora que me estoy acostumbrando, no es tan malo. – Danny

1

Dependiendo de su aplicación, si no tiene la intención de acceder a ningún componente de WinRT, puede navegar su página a ms-appx-web que cambiará la política de seguridad alrededor de la página, pero no puede especificarlo desde el inicio arriba. Debería navegar y aprovechar ese nuevo contexto de seguridad.

La otra opción que tienes para envolver las llamadas a la función jQuery con msWWA.execUnsafeLocalFunction, lo que permitirá a todo ese código inseguro ser empujado en el DOM

+0

Envuelvo mi jQuery .load() dentro de execUnsafeLocalFunction y todavía no hay suerte. Al examinar DOM explorer, mis scripts en esa página han sido eliminados. – Danny

+0

¿Pasó por el código en JQuery donde inserta el script? ¿Lo que pasa? –

7

me fijo, simplemente cambiando la línea de jQuery que estaba causando el error.

jQuery 1.8.0, línea 5566:

append: function() { 
     return this.domManip(arguments, true, function (elem) { 
      if (this.nodeType === 1 || this.nodeType === 11) { 
       self.appendChild(elem); // problem line 
      } 
     }); 
    }, 

cambiado a:

append: function() { 
     return this.domManip(arguments, true, function (elem) { 
      if (this.nodeType === 1 || this.nodeType === 11) { 
       var self = this; 
       MSApp.execUnsafeLocalFunction(function() { 
        self.appendChild(elem); 
       }); 
      } 
     }); 
    }, 
+0

Bueno, esto estaba funcionando, y ahora de repente no lo es. Suspiro. – Danny

Cuestiones relacionadas