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-template稍后会用于渲染其他投资组合，使用AJAX进行回收？

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

<强> -OR -

摆脱服务器端的预渲染，仅使用js。第二个可能是“更干净” - 如果你不想在开始时再做一个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>

可能你应该做一些调整，但应该没有问题。

Answer 2

使用嵌套模板或片段。

Answer 3

你可以使用hamlc。这对双方都有支持......

修身也是一个不错的尝试。客户端苗条称为脱脂。

如何避免客户端和服务器端模板中的html重复？

3 个答案: