Как избежать дублирования HTML в клиентских и серверных шаблонах?

Question

По моему опыту, в шаблонах на стороне сервера и на клиенте много дублирования 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>  

Answer 1

Как я понимаю, ваш js-шаблон используется позже, для рендеринга дополнительных портфелей, полученных с AJAX?

Если это так, вы можете либо - избавиться от js-tmpl и вернуться с предварительно обработанным ajax html

-ИЛИ-

Избавьтесь от предварительной визуализации на стороне сервера и используйте для этого только 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

Вы можете использовать hamlc. Это поддерживает обе стороны ...

Slim также хорошая попытка. Тонкая сторона клиента называется ским.

Answer 3

Использование вложенных шаблонов или фрагментов.