Paramètres JavaScript provenant des données de modèle de la vue

Question

J'ai vu/lu beaucoup de choses en faveur d'un JavaScript «discret» contenu dans des fichiers séparés. Je me prépare à combiner tout mon JavaScript à partir de trois vues partielles dans un seul fichier que je vais ensuite référencer quelque part dans mon maître.

Ma question est la suivante: y a-t-il un type de JavaScript qui devrait rester derrière le code HTML? Un exemple qui me semble peut présenter un problème serait quelque chose comme:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#newQuoteLink').click(function() { 
      $('#newQuoteLink').hide(); 
      $('#newQuoteDiv').load('/Quote/Create/<%:Model.Book.BookID%>'); 
      return false; 
     }); 
    }); 
</script> 

--En particulier

<%:Model.Book.BookID%> 

Ai-je raison de supposer ce script ne fonctionnerait pas si elle est chargée à partir d'un fichier séparé ?

Je voulais surtout vérifier s'il y avait des avertissements ou d'autres considérations avant de tout combiner dans ce fichier séparé.

Merci d'avance.

Answer 1

Nope, promesse de jamais hardcode adresses URL qui dépendent la route comme vous l'avez fait dans votre fichier javascript. C'est mauvais, mauvais, mauvais. Ai-je dit que c'est mauvais?

C'est trop de javascript dans une vue (c'est un gaspillage de bande passante). Vous pouvez essayer une déclaration variable globale javascript votre point de vue:

<script type="text/javascript"> 
    var quoteUrl = '<%: Url.Action("create", "quote", new { id = Model.Book.BookID }) %>'; 
</script> 

et dans votre fichier javascript:

$(function() { 
    $('#newQuoteLink').click(function() { 
     $('#newQuoteLink').hide(); 
     $('#newQuoteDiv').load(quoteUrl); 
     return false; 
    }); 
}); 

C'est un chemin que je ne serais pas personnellement prendre. Toujours une balise script avec une déclaration de variable javascript globale dans votre vue. Encore un gâchis.

---

Les choses deviennent encore plus jolie comme ça (et il est à ce moment-là que vous vous rendez compte de la puissance réelle de javascript discret):

<%: Html.ActionLink("Foo Bar Beer Link Text", "create", "quote", 
    new { id = Model.Book.BookID }, new { id = "newQuoteLink" }) %> 

et dans votre javascript externe:

$(function() { 
    $('#newQuoteLink').click(function() { 
     $('#newQuoteLink').hide(); 
     $('#newQuoteDiv').load(this.href); 
     return false; 
    }); 
}); 

Answer 2

Oui, vous avez raison: <%:Model.Book.BookID%> ne sera pas visible dans le fichier de script. Ces éléments font partie du script côté serveur qui génère le code HTML envoyé au navigateur.

Vous pouvez mettre tout le gros du travail dans le script dans un funciton qui accepte l'identifiant comme param, puis dans votre code html, de votre .ready(..) appel de la fonction comme doStuff("<%:Model.Book.BookID%>") etc.

experts Javascript: d'autres mises en garde? Je mettrai à jour quand je pense à certains