Passando MVC modello di dati per lato client codice dattiloscritto

voti
11

Quando si utilizza MVC, a volte passare i dati del modello del server al client-side JavaScript utilizzando Razor iniettato nel JavaScript, come segue:

<script type=text/javascript>
    var myClientGuid = '@Model.MyServerGuid';
</script>

Questo imposta una variabile JavaScript denominato myClientGuidal valore della proprietà del modello server-side MyServerGuid. Quando raggiunge il cliente, il codice simile a questa all'interno del browser:

<script type=text/javascript>
    var myClientGuid = 'EF0077AB-0482-4D91-90A7-75285F01CA6F';
</script>

Questo permette di file JavaScript esterno per utilizzare questa variabile.

La mia domanda è, a macchina, dal momento che tutto il codice deve essere referenziato tramite file esterni, qual è il modo migliore per passare i campi sul lato server per dattiloscritto codice? File di codice esterni non possono contenere codice Razor. Devo usare la stessa tecnica di cui sopra, in vista, mescolando Javascript e tipografico all'interno del progetto?

È pubblicato 09/10/2012 alle 19:13
fonte dall'utente
In altre lingue...                            


2 risposte

voti
17

Il compilatore dattiloscritto ha solo bisogno di sapere che esistono i campi sul lato server. Il modo più semplice per farlo è quello di utilizzare le dichiarazioni ambientali (vedere sezione 10 delle specifiche). Ad esempio, se si ha un file .ts che aveva bisogno di utilizzare myClientGuid, si potrebbe fare

declare var myClientGuid: string;

nella parte superiore del file .ts principale. Il compilatore non genererà il codice per questa dichiarazione var, in modo da non clobber nulla. Ora tutti i file che fanno riferimento che Ts file si sa che c'è una stringa myClientGuid disponibile in ambito globale.

Risposto il 09/10/2012 a 19:19
fonte dall'utente

voti
2

Un'altra soluzione (per evitare le variabili globali) è quello di avvolgere il codice dattiloscritto in una funzione che prende i campi sul lato server necessari come parametri:

Nel file typescript:

function setupMyPage(myGuid:string) {
   ...
}

In .cshtml:

<script src='@Url.Content("<path-to-typescript>")'></script>
<script>
    setupMyPage('@Model.MyServerGuid');
</script>

Se si utilizza RequireJS, è anche possibile esportare la setupMyPagefunzione di un modulo, per evitare di aggiungere la funzione di namespace globale:

Nel file typescript:

export = setupMyPage;

In .cshtml:

<script>
    require(['@Url.Content("<path-to-typescript>")'], function(setupMyPage) {
        setupMyPage('@Model.MyServerGuid');
    };
</script>
Risposto il 08/08/2014 a 12:24
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more