Как я могу получить шаблон jquery для * не * перебора массива, пока я не буду готов? - PullRequest
0 голосов
/ 14 июня 2011

У меня есть массив данных JSON и шаблон jquery.

Я настроил каждый из своих «элементов управления» и разделил их на собственные файлы, которые я извлекаю с помощью jquery $ .get (). Следующий упрощенный код / ​​разметка демонстрирует:

<html>
    <head>
        <script type="text/javascript">

            var payeeData = [
                {
                    Name: "Ben Alabaster",
                    Address: "My Address"
                },
                {
                    Name: "Joe Bloggs",
                    Address: "Joe's Address"
                },
                {
                    Name: "John Doe",
                    Address: "Chez John"
                }
            ];

            $(function() {
                $.get("./Templates/Payees.tmpl", function (template) {
                    $("#payeePlaceholder").replaceWith($.tmpl(template, payeeData));
                });
            });

        </script>
    <head>
    <body>
         <div id="payeePlaceholder" />
    </body>
</html>

И содержание файла шаблона в вопросе:

<div class="togglePanel">
    <table id="payeeData">
        <tr>
            <th>Payee</th>
            <th>Address</th>
        </tr>
        <!-- Iterate here -->
        {{each(idx,val)}}
        <tr>
            <td>${${val.Name}}</td>
            <td>${${val.Address}}</td>
        </tr>
        {{/each}}
        <!-- End iteration -->
        <tr>
            <td Colspan="2">${ArrayCount} Payees</td>
        </tr>
    </table>
</div>

В моем фактическом рабочем коде у меня есть причина не хотеть разделять итеративную строку на собственный шаблон, хотя я рассмотрел возможность вложения шаблона во внешний и внутренний, если кто-то может продемонстрировать, как, но я не был в состоянии найти это из документации.

Прямо сейчас, если я помещаю массив в механизм шаблонов, я получаю итерацию всего этого шаблона для каждого элемента в массиве, кто-нибудь может продемонстрировать, как это обойти?

1 Ответ

2 голосов
/ 14 июня 2011

Возможно, это не самое элегантное решение, но оно, безусловно, самое простое: заключить массив в объект, чтобы весь шаблон отображался только один раз, и вы можете выполнить свою собственную итерацию.Тогда ваш храм будет выглядеть так:

<div class="togglePanel">
    <table id="payeeData">
        <tr>
            <th>Payee</th>
            <th>Address</th>
        </tr>
        <!-- Iterate here -->
        {{each(idx,val) items}}
        <tr>
            <td>${val.Name}</td>
            <td>${val.Address}</td>
        </tr>
        {{/each}}
        <!-- End iteration -->
        <tr>
            <td Colspan="2">${items.length} Payees</td>
        </tr>
    </table>
</div>
...