laytpl能更好用！

[Kiraalla]

议题条件

• 我确认已查看官方使用文档：https://layui.dev ，但没有找到相关解决方案。
• 我确认已在 Issues 中搜索过类似的问题，但没有找到相关解决方案。
• 我已仔细阅读： 🍀 Layui Issue 贡献指南

议题类型

功能请求

使用版本

v2.9.10

问题描述

laytpl在官方文档里只是描述了其模板引擎可以在<script id="TPL" type="text/html"></script>和laytpl().render({})中使用。
但实际上，我在测试中是可以在.js文件里通过const tplModule=**模板字符串的方式来书写TPL语法，这样更加方便！
TPL的语法结构包括在{{}}之间，这样很不直观，虽然这么做可能是对HTML页面的写法妥协，但是如果新版本能够支持类似jsx的语法那就更好了。我相信很多人喜欢在.js文件中使用模板字符串来操作laytpl的。希望有人能注意到这个。。

业务代码

const paperTPL = `
<div carousel-item>
  {{#  layui.each(d, function(index, item){ }}
  <div>
    <div class="pager-box">
    {{#  layui.each(item, function(thisIndex, thisItem){ }}
    <div class="pager-item">
      <div class="item-head"><span class="head-title">第 {{= item[thisIndex].title}} 期</span><span class="head-time">{{= item[thisIndex].time}}</span></div>
      <div class="item-body"><a target="_blank">{{= item[thisIndex].content}}</a></div>
    </div>
    {{#  }); }}
  </div>
  </div>
  {{#  }); }}
</div>
`
// layUI模块
layui.use(['laytpl',], () => {
  const { $, laytpl } = layui;
  // edit code
  var data = groupedData;
  var getTpl = paperTPL; // 获取模板字符
  var elemView = document.getElementById('ID-carousel-pager-image'); // 视图对象
  // 渲染并输出结果
  laytpl(getTpl).render(data, function (str) {
    if (elemView) elemView.innerHTML = str;
  });
});

截图补充

No response

浏览器

chrome@latest

演示地址

No response

友好承诺

• 我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。

[Sight-wcg]

不会支持 jsx

[github-actions]

@Kiraalla 你好，为了提升沟通效率，我们对 Issue 制定了严格的要求，你的 Issue 因不符合规定而被自动关闭。
建议你在下次创建 Issue 时，遵循相应规范和社区行为准则。谢谢。

详见：🍀 Layui Issue 贡献指南