如何避免客户端和服务器端模板中的 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>

也许你应该做一些调整，但应该没有问题。

Answer 2

使用嵌套模板或 sn-ps。

Answer 3

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

Slim 也是不错的尝试。客户端 slim 称为skim。