Come evitare la duplicazione di html in tempate lato client e server?

Question

Nella mia esperienza sembra che ci sia molta duplicazione di html nei template lato server e lato client. Per lato del client intendo qualcosa come i modelli Jquery, e per lato server intendo le variabili lato server con html.

Nel codice sotto il ciclo foreach Viene eseguito su ogni caricamento della pagina e viene utilizzato per creare un elenco di elementi. Si noti che circonda un blocco di html con segnaposti variabili che vengono utilizzati per i valori dinamici.

Sotto il ciclo foreach abbiamo un modello di Jquery con la stessa identica struttura html, l'unica cosa che è diversa è la sintassi variabile.

C'è modo di "fondere" in modo che non c'è bisogno di ripetere la stessa struttura html markup in entrambi i casi? Sembra semplicemente sbagliato dover usare lo stesso blocco HTML in entrambi i casi.

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

quanto ho capito, il tuo js-modello viene utilizzato in seguito, per rendere i portafogli supplementari, mi hanno assegnato con AJAX?

Se è così, è possibile - sbarazzarsi di JS-tmpl e ritorno con ajax html prerenderizzati

OPPURE

Sbarazzarsi di pre-rendering sul lato server e utilizzare solo js per questo. Il secondo è probabilmente 'più pulito' - e se non vuoi fare ancora una richiesta ajax all'avvio, puoi sempre renderizzare i dati iniziali in json (proprio come il modello), e eseguire solo js rendering func su di esso.

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

Probabilmente si dovrebbe fare qualche aggiustamento, ma dovrebbe funzionare senza problemi.

Answer 2

Utilizzo di modelli o snippet nidificati.

Answer 3

È possibile utilizzare hamlc. Che ha supporto per entrambe le parti ...

Slim è anche un buon tentativo. Il lato client slim è chiamato skim.