Jquery 模板插件答案

【问题标题】：Jquery Templates plugInJquery 模板插件
【发布时间】：2011-05-10 13:51:49
【问题描述】：

大家好，我正在尝试来自 Dave Ward blog 的这个示例

关于 jQuery 模板和我做错的事情。任何帮助将不胜感激。这是他的代码：数据：

 var invoice = {
  invoiceItems: [
    { type: 'item', 
      part: '99Designs', description: '99 Designs Logo', 
      price: 450.00, qty: 1 },
    { type: 'service',
      service: 'Web development and testing', 
      price: 25000.00 },
    { type: 'item',
      part: 'LinodeMonthly', description: 'Monthly site hosting', 
      price: 40.00, qty: 12 }
  ]
};

客户：

  <script id="invoiceTemplate" type="x-jquery-tmpl">
      <table class="invoice">
      {{each lineItems}}
        {{tmpl($value) get_invoiceRowTemplateName(type)}}
      {{/each}}
      </table>
  </script>

Js：

$(function ()
{
    $('#invoiceTemplate').tmpl(invoice).appendTo('body');
});

function get_invoiceRowTemplateName(type) {
  // Return a template selector that matches our 
  //  convention of <type>RowTemplate.
  return '#' + type + 'RowTemplate';
}

【问题讨论】：

您可能想详细说明“错误”的含义...您是否得到输出，输出是否错误，结果有什么问题等等
@Ben 它什么也没做，但 Dave 已经回答了我的问题，我缺少“行”模板。

标签： jquery templates jquery-templates

【解决方案1】：

不要忘记行模板：

<script id="serviceRowTemplate" type="x-jquery-tmpl">
  <tr class="service">
    <td colspan="2">${service}</td>
    <td colspan="2">${price}</td>
  </tr>
</script>

<script id="itemRowTemplate" type="x-jquery-tmpl">
  <tr class="item">
    <td>${item}</td>
    <td>${description}</td>
    <td>${price}</td>
    <td>${qty}</td>
  </tr>
</script>

当 get_invoiceRowTemplateName() 将每个项目的 type 解析为相应的 *type*RowTemplate 时，这些单独的行模板将用于呈现每个项目。

【讨论】：