web-dev-qa-db-fra.com

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

Par exemple, voir la source sur Profil de carrière public 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é pour ces balises html et les codes similaires aux modèles {{= .... }} à l'intérieur des balises de script?

javascripthtmlscript-tag
27
YOU

Vous pouvez mettre tout ce que vous voulez dans un <script> tag. 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 y accéder en texte brut. Étant donné que le contenu de <script> les balises sont traitées comme CDATA, le contenu n'est pas analysé et vous pouvez stocker du XML ou du HTML sans guillemets dans le contenu (tant que vous ne mettez jamais un </script> tag dans le contenu, car cela fermera votre élément).

Ceci est utilisé, par exemple, dans SVG Web , un polyfill qui vous permet d'utiliser le SVG en ligne en HTML et de le convertir en SVG natif dans les navigateurs qui le prennent en charge, ou Flash dans les navigateurs qui ne le font pas. . Il permet l'incorporation de SVG dans des navigateurs qui ne le prennent pas en charge nativement en l'enveloppant dans un <script> tag, afin que le navigateur n'essaye pas et échoue à l'analyser en HTML.

Dans le cas des carrières SO, il semble qu'elles stockent des modèles à utiliser avec Backbone.js et nderscore.js in <script> tags, car c'est un endroit pratique pour coller des modèles en HTML. Voici un extrait de leur code où ils récupèrent le modèle et le fournissent au moteur de modèle Underscore:

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

La clé se trouve dans l'attribut type du script. En le définissant sur type = "text/html" il ne sera pas exécuté 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 webémission MIX 2011 qui montre comment quelque chose de similaire est utilisé dans Knockout.js:

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

8
Shawn