Làm thế nào để tránh trùng lặp html ở nhiệt độ bên máy khách và máy chủ?

Question

Theo kinh nghiệm của tôi, có vẻ như có rất nhiều sự sao chép html trong các khuôn mẫu máy chủ và phía máy khách. Về phía khách hàng tôi có nghĩa là một cái gì đó giống như các mẫu Jquery, và bởi phía máy chủ tôi có nghĩa là sử dụng các biến phía máy chủ với html.

Trong mã bên dưới vòng lặp foreach được thực hiện trên mọi lần tải trang và được sử dụng để tạo danh sách các mục. Lưu ý rằng nó bao quanh một khối html với các phần giữ chỗ biến đổi được sử dụng cho các giá trị động.

Bên dưới vòng lặp foreach, chúng tôi có mẫu Jquery với cấu trúc html giống hệt nhau, điều duy nhất khác biệt là cú pháp biến.

Có cách nào để "hợp nhất" nó để tôi không phải lặp lại cùng một cấu trúc đánh dấu html trong cả hai trường hợp? Nó chỉ có vẻ sai khi phải sử dụng chính xác cùng một khối html trong cả hai trường hợp.

cũ

<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

Như tôi hiểu, bạn js-mẫu được sử dụng sau này, để làm cho danh mục đầu tư bổ sung, recived với AJAX?

Nếu vậy, bạn có thể - thoát khỏi js-tmpl và trở lại với ajax kết xuất trước html

-HOẶC-

Loại bỏ các cách hiển thị trước trên serverside và chỉ sử dụng js cho việc này. Thứ hai có lẽ là 'sạch hơn' - và nếu bạn không muốn thực hiện thêm một yêu cầu ajax lúc bắt đầu, bạn có thể chuyển dữ liệu ban đầu thành json (giống như mẫu) và chỉ chạy js rendering func trên đó.

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

Có lẽ bạn nên thực hiện một số điều chỉnh, nhưng sẽ hoạt động không có vấn đề gì.

Answer 2

Sử dụng các mẫu hoặc đoạn lồng nhau.

Answer 3

Bạn có thể sử dụng hamlc. Điều đó có hỗ trợ cho cả hai bên ...

Mỏng cũng là một thử tốt. Các mỏng phía khách hàng được gọi là skim.