2012-08-31 2 views
1

J'essaie d'ajouter une carte Leaflet dans mon application et il nécessite l'ajout d'un code JS après, y compris CSS de Leaflet et JS. Le serveur Opa ajoute CSS dans le nœud HTML <head>, mais le <script> pour le fichier JS de ressource est inclus après tout le code XHTML généré. Alors, comment ajouter le code pour la carte?Exécution personnalisée JavaScript généré après ressources fichier JS

J'ai jeté un coup d'oeil au GMaps API mais il est difficile de croire que c'est un bon moyen de le faire. Les cartes sont ajoutées avec le XHTML:

<script> 
Xhtml.of_string_unsafe("some JS function loading the map"); 
</script> 

chargeur carte écrite totalement JS comme la chaîne se lie à onReady, génère de nouvelles javascript élément DOM, et elle se adresse à la fin du document. Est-ce que je peux changer l'endroit où le fichier JS est inclus au début du document

?

Répondre

1

Voici un exemple de code qui vous permettra de définir vos propres têtes:

headers = 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" /> 
    <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script> 

Server.start(
    Server.http, { 
    dispatch: function(_) { 
     Resource.full_page(
     "Leaflet", 
     <>Hello Leaflet</>, headers, {success}, 
     [] 
     ) 
    } 
    } 
) 

Sinon, si vous voulez ajouter à la fin, vous pouvez utiliser:

Resource.register_external_js("/path/to/my/js")

Resource.register_external_css("/path/to/my/css") Ceci est utile car vous avez besoin que jQuery soit chargé en premier (jQuery étant incorporé dans all.js, à la fin du document). t).

+0

Il fonctionne, merci vous :) Bien que, maintenant je ne considère pas ajouter un nouvel élément de script à la fin du document une telle mauvaise idée. Ce que je n'aimais pas dans l'API GMaps, c'était d'utiliser trop de content_unsafe pour intégrer JS. –

0

Bien que, comme Fred a fait remarquer, leaflet.js peuvent être inclus facilement dans l'en-tête du document, je reste avec la JS pour la carte jointe à la fin du document:

function onready(_) { 
    body = Dom.select_body(); 
    *body =+ <script>{Xhtml.of_string_unsafe(script)}</script>; 
    void; 
} 
<div id="{map_id}" onready={function (_) Dom.bind(Dom.select_document(), {ready}, onready);void}></div> 
Questions connexes