jQuery模板數據顯示問題

Question

我一直在努力讓jQuery.tmpl（）使用我通過JSTL創建的JSON文件來填充JSP頁面。

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方法，而不是執行它的結果。