Проблема с отображением данных в шаблонах jQuery

Question

Я изо всех сил пытался заставить jQuery.tmpl () заполнить страницу JSP с помощью файла JSON, который я создаю с помощью JSTL.

JSON (/misc/managed_solutions/results.htm):

    var dataTable = [

            {
                firmName: "name",
                portfolioName: "Fund Allocation Portfolio",
                firmAum: "3.2394E8",
                portfolioAum: "2.3659865E7",
                objTypeDesc: "Capital Preservation/Current Income",
                gipsFlg: "Yes",
                inceptionDt: "01/01/2000",
                stateProvCd: "CA",
                pdfFileNm: "TremendousGrowth.pdf",
                agencyNm1: "name",
                agencyNm2: "name",
                agencyNm3: "name",
                agencyNm4: "name"
            }
            ,
            {
                firmName: "name",
                portfolioName: "Capital Allocation Portfolio",
                firmAum: "4.2394E8",
                portfolioAum: "4.3659865E7",
                objTypeDesc: "Capital Appreciation - Aggressive",
                gipsFlg: "Yes",
                inceptionDt: "01/01/2005",
                stateProvCd: "CA",
                pdfFileNm: "CapitalAllocation.pdf",
                agencyNm1: "name",
                agencyNm2: "name",
                agencyNm3: "name",
                agencyNm4: "name"
            }
            ,
            {
                firmName: "name",
                portfolioName: "name",
                firmAum: "2.2394E8",
                portfolioAum: "1.3659865E7",
                objTypeDesc: "Capital Appreciation - Moderate",
                gipsFlg: "No",
                inceptionDt: "01/01/2008",
                stateProvCd: "TX",
                pdfFileNm: "Global Core Equity.pdf",
                agencyNm1: "name",
                agencyNm2: "name",
                agencyNm3: "name",
                agencyNm4: "name"
            }

];

jQuery JS

function getPortfolioData( start ) {

    var markup = "<tr>" +
                    "<td><p>${firmName}</p>" +
                        "<a href='/path/to/content/${pdfFileNm}'>${portfolioName}</a>" +
                    "</td>" +
                    "<td>" +
                        "<p>${firmAum}</p>" +
                        "<p>${portfolioAum}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${objTypeDesc}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${gipsFlg}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${inceptionDt}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${agencyNm1}</p>" +
                        "<p>${agencyNm2}</p>" +
                        "<p>${agencyNm3}</p>" +
                        "<p>${agencyNm4}</p>" +
                    "</td>" +
                    "<td>" +
                        "<p>${stateProvCd}</p>" +
                    "</td>" +
                 "</tr>";

    $.template( "portfoliosTemplate", markup );

    $.ajax({
        dataType: "jsonp",
        url: '/misc/managed_solutions/results.htm?startPosition=' + start + '&viewRows=3',
        jsonp: "$callback",
        success: showPortfolio()
    });

    function showPortfolio(dataTable) {

        // Remove current set of portfolio items
        $( ".data-table.tpm tbody" ).empty();

        // Render the template items for each portfolio
        $.tmpl( "portfoliosTemplate", dataTable ).appendTo( ".data-table.tpm tbody" );
    }
}

HTML

<table class="data-table tpm">
    <tbody>
    </tbody>
</table>

RESULT

<table class="data-table tpm">  
    <tbody>
        <tr>
            <td>
                <p></p>
                <a href="/path/to/content/"></a>
            </td>
            <td>
                <p></p>
                <p></p>
            </td>
            <td>
                <p></p>
            </td>
            <td>
                <p></p>
            </td>
            <td>
                <p></p>
            </td>
            <td>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </td>
            <td>
                <p></p>
            </td>
        </tr>
    </tbody>
</table>

Мне удалось получить html-разметку для отображения в tbody, но ни одно из значений.Кроме того, разметка отображается только один раз, сообщая, что итераций не происходит.

Есть идеи?

DKM

Answer 1

Учитывая вашу разметку, данные и JavaScript, ваш код работает нормально:

Пример: http://jsfiddle.net/Xdw2v/

У меня есть догадка, что проблема, которую вы видите, связана с вашим вызовом AJAX:

$.ajax({
    dataType: "jsonp",
    url: '/misc/managed_solutions/results.htm?startPosition=' + start + '&viewRows=3',
    jsonp: "$callback",
    success: showPortfolio()
});

В частности, свойство success установлено на результаты выполнения showPortfolio() метода . Это приводит к немедленной визуализации вашего шаблона (без данных). Я думаю, что вы действительно хотите:

success: showPortfolio

То есть ссылка на ваш метод showPortfolio вместо результатов его выполнения.