如何避免客戶端和服務器端的HTML中的重複？

根據我的經驗，似乎在服務器和客戶端模板中有很多html的重複。在客戶端，我的意思是像Jquery模板，而服務器端我的意思是使用html的服務器端變量。如何避免客戶端和服務器端的HTML中的重複？

在下面的代碼中，foreach循環在每個頁面加載時執行並用於創建項目列表。請注意，它圍繞着一個包含用於動態值的可變佔位符的HTML塊。

在foreach循環下面我們有一個具有完全相同html結構的Jquery模板，唯一不同的是變量語法。

有沒有辦法「合併」它，所以我不必在這兩種情況下重複相同的HTML標記結構？在兩種情況下，使用完全相同的html塊似乎都是錯誤的。

前

<h1>Portfolio's</h1> 
      <ul id="portfolioList" class="portfolio"> 
       <% foreach (Portfolio p in Portfolios) 
        { %>   
         <li> 
          <span class="delete">[X] </span> 
          <a href="/portfolioDetails.aspx?p=<%=p.PortfolioId %>"><%=p.Name %></a> 
         </li> 
       <% } %> 
      </ul> 

      <!-- portfolio template --> 
      <script id="portfolioTemplate" type="text/x-jquery-tmpl"> 
       <li> 
        <span class="delete">[X] </span> 
        <a href="/portfolioDetails.aspx?p=${PortfolioId}">${Name}</a> 
       </li> 
      </script>

來源

2012-01-08 chobo

據我瞭解，你的JS-模板以後使用，呈現更多的組合，用AJAX recived？

如果是這樣，你可以 - 擺脫JS-TMPL和使用Ajax分段HTML

- 或 -

返回擺脫預渲染的服務器端而只使用這個JS。第二個可能是'更乾淨' - 如果你不想在開始時再發出一個Ajax請求，你可以將初始數據渲染成json（就像模板一樣），並且只運行js渲染func。

<h1>Portfolio's</h1> 
<ul id="portfolioList" class="portfolio"> 
</ul> 

<!-- portfolio template --> 
<script id="portfolioTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <span class="delete">[X] </span> 
     <a href="/portfolioDetails.aspx?p=${PortfolioId}">${Name}</a> 
    </li> 
</script> 

<!-- initial rendering -->  
<script> 
    (function(){ 
     var initData = [ 
      <% foreach (Portfolio p in Portfolios) { %> 
      { PorfolioId : <%=p.PortfolioId%>, Name : "<%=p.Name%>" }, 
      <% } %> 
     ]; 
     $("#portfolioTemplate").tmpl(initData).appendTo("#portfolioList"); 
    }()); 
</script>

也許你應該做一些調整，但應該沒有問題的工作。

來源

2012-01-08 01:22:36

您可以舉一個例子來說明避免第二個選項的附加ajax請求的技巧嗎？ – chobo 2012-01-08 01:49:44

我添加了一個例子。 – 2012-01-08 11:04:35

這實際上工作得很好，謝謝！ – chobo 2012-01-08 18:43:02

使用嵌套的模板或片段。

來源

2012-01-08 01:26:13 kaz

您能提供更多的細節嗎？我不確定你是什麼意思 – chobo 2012-01-08 01:47:51

您可以使用hamlc。這支持雙方......

苗條也是一個很好的嘗試。客戶端slim被稱爲skim。

來源

2013-11-25 13:39:44 Boti

如何避免客戶端和服務器端的HTML中的重複？

回答

相關問題