Creazione di un'applicazione Windows 8 Metro con jQuery

Question

Ho appena iniziato lo sviluppo di Windows 8 utilizzando HTML/JS. Ho passato gli ultimi mesi immerso nello sviluppo di jQuery per app rivolte a unità principali di veicoli e televisori.

Saltando in questo, ho pensato che la transizione sarebbe stata semplice. Ho il design e la struttura del mio sito tutti pensati per la maggior parte e speravo di seguire alcune delle pratiche che avevo usato per il mio precedente lavoro.

Cioè, voglio essenzialmente creare un'app per singola pagina. Il file default.html principale ospiterà la navigazione/il titolo in alto e un altro div. L'altro div verrà utilizzato per caricare tutte le altre pagine, tutti i file HTML separati all'interno del progetto.

Tutte le funzioni globali e le funzionalità principali risiederanno in un file javascript, application.js. Quindi qualsiasi javascript specifico della pagina risiederà nella parte superiore di ciascun file HTML.

Mi sto rapidamente rendendo conto che questo è un problema. L'utilizzo di jQuery.load() per caricare nelle mie pagine causa errori di sicurezza nella mia app.

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.

Speravo davvero di evitare di dover imparare un sacco di cose specifiche di Microsoft. Penso che sia fantastico che abbiano fornito molti strumenti e cosa no, e forse non li ho usati abbastanza, ma tutto sembra troppo rigido per me e per quello che sto cercando di fare o che posso già realizzare con jQuery. Sono uno a cui piace conoscere ESATTAMENTE cosa sta succedendo e avere il pieno controllo su di esso.

Anche guardando attraverso i modelli e progetti di esempio, davvero non mi piace tutto il codice ripetuto. Ad esempio, ogni singolo file HTML che dichiara tutti gli stessi riferimenti. Voglio scrivere le mie referenze e sezioni come la mia barra del titolo solo una volta, e non dover copiare/incollare quel codice in tutto il mio progetto.

C'è un modo per fare le cose nel modo in cui speravo e creare un'applicazione per una sola pagina? Hanno il loro sostituto per jQuery's .load()?

Qualsiasi aiuto che mi indichi la giusta direzione sarebbe molto apprezzato!

EDIT 2012/08/14:

Ho provato con la correzione da questa domanda: Using jQuery with Windows 8 Metro JavaScript App causes security error

Questo elimina l'avviso di protezione e posso caricare in HTML usando jQuery.load() . Tuttavia, guardando il DOM explorer, il mio codice HTML viene privato dei miei script.

Ho anche provato a racchiudere la mia chiamata .load() all'interno di MSApp.execUnsafeLocalFunction(), ma ancora una volta il mio file viene ancora rimosso da tutti gli script. Cosa dà?

Answer 1

C'è un modo "formale" di fare quello che stai cercando.
WinJS.Navigation viene fornito per supportare "app a pagina singola". Ad esempio, il default.html conterrebbe un markup che rappresentasse in cui il contenuto della pagina caricata dinamicamente sarebbe andato:

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

Nell'esempio di cui sopra, la pagina reale contenuto caricato è al /pages/home/home.html

In gestori di eventi, è può semplicemente effettuare le seguenti operazioni per load o passare a un'altra pagina:

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

è vero, non è jQuery, ma funziona benissimo :)

Answer 2

A seconda dell'app, se non si intende accedere a qualsiasi componente WinRT, è possibile navigare la pagina su ms-appx-web che modificherà la politica di sicurezza intorno alla pagina, ma non è possibile specificarla dall'inizio su. Dovresti fare una navigazione e sfruttare quel nuovo contesto secernente.

L'altra opzione che avete per avvolgere le chiamate a JQuery con funzione di msWWA.execUnsafeLocalFunction, che consentirà a tutti che il codice non sicuro essere spinto nel DOM

Answer 3

ho fissato semplicemente cambiando la linea di jQuery che stava causando l'errore.

jQuery-1.8.0, linea 5566:

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

cambiato in:

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); 
       }); 
      } 
     }); 
    },