JTBC5.0模板前端渲染组件jtbc-template的使用

先来看一下官方的：

只需指定一个data和模板内容即可完成前端渲染，具体实例如下：

<template is="jtbc-template" data="{&quot;text&quot;:&quot;hello world&quot;}">
  <h1>${$text}</h1>
</template>

上述的实例，最终会转变为：<h1>hello world</h1>，template标签指定is属性为jtbc-template，负责从给定的data和模板内容生成渲染结果，上述data的值经过了html编码，实际值为：{"text":"hello world"}，可见其值其实就是定义了一个text的值为hello world的JSON字符串，在模板中使用${$text}来输出对应的值。

使用jtbc-template来渲染一个复杂页面

<template is="jtbc-template" data="{&quot;grade&quot;:&quot;1&quot;,&quot;class&quot;:&quot;8&quot;,&quot;transcript&quot;:[{&quot;name&quot;:&quot;\u5c0f\u660e&quot;,&quot;score&quot;:98},{&quot;name&quot;:&quot;\u5c0f\u7ea2&quot;,&quot;score&quot;:96}]}">
  <h1>${$grade}年级(${$class})班学习成绩表</h1>
  <template is="jtbc-template" key="transcript">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>分数</th>
        </tr>
      </thead>
      <tbody isloop="true">
        <tr>
          <td>${$name}</td>
          <td>${$score}</td>
        </tr>
      </tbody>
    </table>
  </template>
</template>

实例代码中的data的值经过了html编码，实际值为：{"grade":"1","class":"8","transcript":[{"name":"小明","score":98},{"name":"小红","score":96}]}。由此可见，我们只需将transcript的值传递给子模板即可完成嵌套渲染。

以上参考：httPS://help.jtbc.cn/php/5.0/#render/forestage.xml

如果你在页面中有相同的元素，例如{$text}。

正常输出则需要调整代码：

<template is="jtbc-template" data="{&quot;data&quot;:{&quot;text&quot;:&quot;hello world&quot;}}">
  <h1>${$data.text}</h1>
</template>

再进一步。如果你的数据不适合直接输出到模板里，则可以使用url属性来处理：

            <template is="jtbc-template" url="{$=$getActualRoute('template/')}?type=api&amp;top=16">
              <template is="jtbc-template" key="data">
                <div class="item">
                  <p class="image"><a href="{$=$getActualRoute('template/')}?type=detail&amp;id=${$data.id}"><img src="${$data.images}" alt="${$data.title}"></a></p>
                  <p class="title" style="bottom:39px;"><a href="{$=$getActualRoute('template/')}?type=detail&amp;id=${$data.id}">JTBC${$data.title}模板</a></p>
                </div>
              </template>
            </template>

其中url网址输出的内容为：

{"code":1,"data":{"data":[{"data":{"id":"119","numid":"700060","title":"\u4e00\u4e2a\u84dd\u8272\u98ce\u683c\u7684\u5236\u9020\u4e1a\u4f01\u4e1a\u5b98\u7f51","intro":"\u5b89\u88c5\u672c\u6574\u4f53\u5e94\u7528\u5305\u4e4b\u540e\uff0c\u5c06\u53d8\u6210\u4e00\u4e2a\u84dd\u8272\u98ce\u683c\u7684\u5236\u9020\u4e1a\u4f01\u4e1a\u5b98\u7f51","price":570,"images":"\/template\/common\/upload\/119\/poster.png"}},{"data":{"id":"104","numid":"700045","title":"\u4e00\u4e2a\u9752\u7c89\u8272\u77e2\u91cf\u56fe\u98ce\u683c\u7684\u4e92\u8054\u7f51\u516c\u53f8\u7c7b\u578b\u7684\u4f01\u4e1a\u7f51\u7ad9","intro":"\u5b89\u88c5\u672c\u6574\u4f53\u5e94\u7528\u5305\u4e4b\u540e\uff0c\u5c06\u53d8\u6210\u4e00\u4e2a\u9752\u7c89\u8272\u77e2\u91cf\u56fe\u98ce\u683c\u7684\u4e92\u8054\u7f51\u516c\u53f8\u7c7b\u578b\u7684\u4f01\u4e1a\u7f51\u7ad9","price":670,"images":"\/template\/common\/upload\/104\/poster.png"}}]}}

其中data的多一层元素嵌套，避免了在模板中的元素冲突问题。

这样我们就可以通过url来进行更多内容的输出，更复杂的内容输出来实现多样化的数据展示。