HTML標籤如何在腳本標籤內工作？

Question

例如，查看源代碼在Joel Spolsky's public career profile

<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> 

如何HTML標籤腳本標籤中工作？和/或什麼樣的技術用於這些html標籤，以及模板內碼{{= .... }}裏面的腳本標籤？

Answer 1

你可以把你的<script>標籤想要的任何東西。如果您指定的內容類型不是Javascript（或者瀏覽器可以理解的另一種腳本語言），則它不會被瀏覽器解釋，您只能以純文本的形式訪問它。由於<script>標籤的內容被視爲CDATA，所以內容不會被解析，您可以在內容中存儲未加引號的XML或HTML（只要您不會在內容中放置</script>標籤，因爲這會關閉您的元素）。

例如，在SVG Web中使用了一個polyfill，它允許您在HTML中使用內聯SVG，並在支持它的瀏覽器中將其轉換爲本機SVG，或者在不支持的瀏覽器中將Flash轉換爲本機SVG。它允許將SVG嵌入到不支持本機的瀏覽器中，方法是將其封裝在<script>標記中，這樣瀏覽器就不會嘗試並將其解析爲HTML。

在SO carreers的情況下，它看起來像他們存儲使用模板和Backbone.js和Underscore.js在<script>標籤，因爲這是一個方便的地方貼模板HTML。這裏就是他們抓住模板，並將其提供給下劃線的模板引擎的代碼片段：

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

Answer 2

關鍵在於腳本的類型屬性。通過將其設置爲type =「text/html」它不會被瀏覽器的JavaScript引擎運行。相反，它用於其他的東西，比如模板。這個例子似乎是在模板中使用這些標籤。

看看這個MIX 2011網絡直播，演示如何類似的東西在Knockout.js使用：

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