Javascript Girl
  1. Javascript Girl
  3. Comment les balises HTML fonctionnent-elles dans la balise de script?
Intereting Posts
Exécuter V8 Javascript Engine Standalone Existe-t-il un rappel pour annuler la fenêtre. Twitter bootstrap popovers pour R brillant application – html est interprété comme du contenu texte – pourquoi? Affecter une valeur de session en utilisant javascript Qu'est-ce que havePendingMacrotasks et hasPendingMicrochesks ont-ils vérifié? Pourquoi AngularJS double-t-il la chaîne de requête dans mon parcours? Triple Quotes? Comment délimiter un paramètre de chaîne de javascript JavaScript dans ASP.NET? Comment rendre d3.layout.tree pour qu'il se répand vers le bas (root en haut) Alternatives à eval () pour plusieurs objets imbriqués Jumelage partiel Javascript RegEx Comment puis-je m'assurer que le texte codé sous forme est utf8 Quel éditeur de JavaScript de Markdown de style de débordement de pile (WMD) devrait-je utiliser? Échappement de la barre oblique inverse en chaîne – javascript Comment ajouter une nouvelle classe et des attributs à div s'il existe sur la page La directive angulaire dans le plugin jQuery ne fonctionne pas

Comment les balises HTML fonctionnent-elles dans la balise de script?

Par exemple, voir-source au profil de carrière publique de Joel Spolsky 

<script type="text/html" id="stackexchangeanswerswidget"> <h3>Top Answers</h3> <div class="answers"> </div> </script> <script type="text/html" id="topanswer"> <div class="top-answer"> <div class="top-answer-stats">{{= shared.htmlEncode(Score) }}</div> <span class="top-answer-title"><a href="{{=AnswerLink}}">{{= shared.htmlEncode(Title) }}</a></span> <a class="add-answer">add</a> <br class="clear" /> </div> </script> <script type="text/html" id="answer-view"> <div class="answer"> <div class="answer-stats {{= shared.htmlEncode(Site.toLowerCase().replace(/ /g, '')) }}"> <div class="score"> <strong>{{= shared.htmlEncode(Score) }}</strong> <div class="votecount">votes</div> </div> <img class="answer-logo" src="{{= shared.htmlEncode(FaviconUrl) }}" /> </div> <div class="answer-content"> <span class="q">Q:</span> <div class="answer-top"> <a class="answer-title" href="{{= shared.htmlEncode(AnswerLink) }}">{{= shared.htmlEncode(Title) }}</a><br /> </div> <span class="a">A:</span><div class="answer-body">{{= Body }}</div> <div class="more-button" style="text-align:center; clear:both; display:none;"><a class="more">More</a></div> </div> </div> </script>

Comment les balises HTML fonctionnent-elles dans la balise de script? Et / ou quel type de technologie utilisée pour ces balises html, et les codes semblables au modèle {{= .... }} dans les tags de script?

Vous pouvez mettre tout ce que vous voulez dans une <script> . Si vous spécifiez un type de contenu autre que Javascript (ou un autre langage de script que le navigateur comprend), il ne sera pas interprété par le navigateur, et vous pouvez simplement l'accéder en texte brut. Étant donné que le contenu des balises <script> est traité comme CDATA, les contenus ne sont pas analysés et vous pouvez stocker un XML ou un HTML non cité dans les contenus (tant que vous n'avez jamais mis une </script> dans le contenu, car Cela fermera votre élément).

Ceci est utilisé, par exemple, dans SVG Web , un polyfill qui vous permet d'utiliser SVG en HTML en HTML et de l'avoir converti en SVG natif dans les navigateurs qui le supportent, ou Flash dans les navigateurs qui ne le font pas. Il permet l'intégration de SVG dans les navigateurs qui ne le supportent pas nativement en l'enveloppant dans une <script> , de sorte que le navigateur ne tente pas de l'analyser en HTML.

Dans le cas de SO carreers, il semble qu'ils stockent des modèles à utiliser avec Backbone.js et Underscore.js dans les balises <script> , car c'est un endroit pratique pour coller des modèles en HTML. Voici un extrait de leur code où ils prennent le modèle et le fournissent au moteur de modèle de soulignement: 

  TopAnswerView = Backbone.View.extend({ template: _.template($("#topanswer").html()), events: { "click .add-answer": "addAnswerToCV" },

La clé est dans l'attribut de type du script. En le configurant pour taper = "text / html", il ne fonctionne pas par le moteur JavaScript du navigateur. Au lieu de cela, il est utilisé pour d'autres choses, comme les modèles. Cet exemple semble utiliser ces balises pour les modèles.

Découvrez cette émission Web MIX 2011 qui montre comment quelque chose d'similaire est utilisé dans Knockout.js:

http://channel9.msdn.com/events/mix/mix11/FRM08