¿Cómo evitar la duplicación de html en tempates del lado del cliente y del servidor?

Question

En mi experiencia, parece que hay mucha duplicación de html en las plantillas del servidor y del lado del cliente. Por el lado del cliente me refiero a algo así como las plantillas de Jquery, y por el lado del servidor me refiero al uso de variables del lado del servidor con html.

En el siguiente código, el bucle foreach se ejecuta en cada carga de página y se utiliza para crear una lista de elementos. Observe que rodea un bloque de html con marcadores de posición variables que se usan para valores dinámicos.

Debajo del bucle foreach tenemos una plantilla de Jquery con la misma estructura html, lo único que difiere es la sintaxis de la variable.

¿Hay forma de "fusionarlo" para no tener que repetir la misma estructura de marcado html en ambos casos? Simplemente parece incorrecto tener que usar exactamente el mismo bloque html en ambos casos.

ex

<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

Según entiendo, sus js-plantilla se usa más adelante, para hacer carteras adicionales, recived con AJAX?

Si es así, puede - deshacerse de JS-tmpl y volver con ajax html prerendered

-O-

Deshacerse de procesamiento previo en serverside y utilizar sólo js para esto. El segundo es probablemente "más limpio", y si no desea realizar una solicitud más ajax al inicio, siempre puede presentar los datos iniciales en json (al igual que la plantilla), y solo ejecutar js rendering func en él.

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

Probablemente debe hacer algunos ajustes, pero debería funcionar sin problemas.

Answer 2

Uso de plantillas o fragmentos anidados.

Answer 3

Puede usar hamlc. Eso tiene soporte para ambos lados ...

Slim también es un buen intento. El lado del cliente delgado se llama skim.