2011-04-15 145 views
24

例如,查看源代碼在Joel Spolsky's public career profileHTML標籤如何在腳本標籤內工作?

<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標籤,以及模板內碼{{= .... }}裏面的腳本標籤?

+0

可能是像小鬍子 - http://mustache.github.com/ – Kai 2011-04-15 15:50:40

回答

24

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

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

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

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

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

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

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

+0

這裏有一些例子:HTTP ://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/, – Shawn 2011-04-15 16:08:44