如何避免客户端和服务器端的重复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 接收的其他投资组合？

如果是这样，你可以 - 摆脱 js-tmpl 并返回 ajax 预渲染的 html

-或者-

摆脱服务器端的预渲染并仅使用 js 来实现此目的。第二个可能是“更干净”——如果你不想在开始时再发出一个ajax请求，你总是可以将初始数据渲染成json（就像模板一样），并且只在其上运行js渲染函数。

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

也许您应该进行一些调整，但应该可以正常工作。