Jquery 如何避免在客户端和服务器端临时版本中重复html？

根据我的经验，在服务器端和客户端模板中似乎有很多html的重复。客户端指的是Jquery模板，服务器端指的是将服务器端变量与html结合使用

在下面的代码中，foreach循环在每次页面加载时执行，用于创建项目列表。请注意，它用用于动态值的变量占位符包围了一块html

在foreach循环下面，我们有一个Jquery模板，它具有完全相同的html结构，唯一不同的是变量语法

有没有办法“合并”它，这样我就不必在两种情况下重复相同的html标记结构？在这两种情况下使用完全相同的html块似乎是错误的

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>  

Portfolio的


[X]



[X]

据我所知，您的js模板稍后将用于呈现其他公文包，是否接受AJAX

如果是这样的话，您可以-去掉JSTMPL并返回ajax预渲染html

-或-

摆脱服务器端的预渲染，只使用js。第二种可能是“更干净”——如果您不想在开始时再发出一个ajax请求，您可以将初始数据呈现为json（就像模板一样），并且只对其运行js rendering 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>

Portfolio的



[X]

（功能（）{
var initData=[
{PorfolioId:，名称：'}，
];
$（“#portfolioTemplate”）.tmpl（initData）.appendTo（“#portfolioList”）；
}());

---

可能您应该进行一些调整，但应该可以毫无问题地工作。

使用嵌套模板或代码段。

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

---

苗条也是一个不错的尝试。客户端slim称为skim。

您能提供更多详细信息吗？我不知道你的意思，你能举个例子说明你的技术，避免对第二个选项提出额外的ajax请求吗？请记住，机器人（例如来自谷歌）可能看不到任何东西，因为它们通常不执行javascript。我遇到过同样的情况。Adam提供的解决方案看起来不错，但是tmpl插件不再被维护。请参阅：有几十个基于JS的模板引擎（如），因此jqtmpl被放弃是没有问题的。是的，机器人程序可能会遇到这样显示内容的问题，但这是所有基于AJAX的应用程序中的常见问题：/