どのようにクライアントとサーバー側tempatesのhtmlの重複を避けるために？

Question

私の経験では、サーバー側とクライアント側のテンプレートには多くのhtmlが重複しているようです。クライアント側では、Jqueryテンプレートのようなものを意味し、サーバー側では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> 

Answer 1

私は理解しているように、あなたのJS-テンプレートは、AJAXでrecived追加ポートフォリオを、レンダリングするために、後で使用されていますか？

もしそうなら、あなたはどちらかのことができます - サーバーサイドでの事前レンダリングを取り除くと、このためだけのJSを使用して取得JS-TMPLを取り除くとAjaxレンダリング済みのHTML

-OR-

で返します。 2番目はたぶん「クリーナー」です。最初にもう1つの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> 

おそらくあなたは、いくつかのadjusmentsを作る必要がありますが、問題なく動作するはずです。

Answer 2

ネストされたテンプレートまたはスニペットを使用する。

Answer 3

hamlcを使用できます。それは両側のサポートを持っています...

スリムも良いです。クライアント側のスリムはスキムと呼ばれます。