laytpl需手动获取模板字符串并调用laytpl()编译，数据必须挂载在d下，渲染后需手动插入DOM并重渲染layui组件，常见问题多因模板语法错误或数据结构不匹配导致静默失败。
laytpl 怎么加载和编译模板
必须先拿到模板字符串，再调用 laytpl() 编译——它不自动读取 dom，也不会帮你找 script 标签，这步得自己写清楚。
- 模板通常放在
<script type="text/html" id="myTpl">...</script>里，用document.getElementById('myTpl').innerHTML或$('#myTpl').html()取值，别漏掉.innerHTML（jQuery 写法是.html()） - 直接传入字符串也行，比如
laytpl('<div>{{ d.name }}</div>')，适合简单内联模板 - 如果模板里有未闭合的标签、错位的
{{# }}，laytpl()不报错，但后续render()会静默失败或输出空字符串——这是最常被忽略的调试盲区
数据怎么传、字段怎么写才不出错
d 是唯一可用的数据上下文变量名，所有字段都得挂它下面；写成 {{ name }} 或 {{ data.name }} 都不生效。
- 普通字段输出：用
{{ d.field }}（不转义 HTML），需要防 XSS 就改用{{= d.field }}（自动layui.escape()） - 条件判断必须用
{{# if(...) { }}包裹，且 JS 语句末尾不能加分号（{{# if(d.flag) { }}...{{# } }}✅，{{# if(d.flag){ }; }}❌） - 遍历数组只能用
layui.each(d.list, function(i, item){ ... })，不能用for...of或forEach——引擎内部没暴露这些原生方法 - 模板里访问嵌套对象如
d.user.profile.avatar没问题，但如果d.user是undefined，整个表达式会崩，建议加兜底：{{ d.user && d.user.profile ? d.user.profile.avatar : '' }}
渲染完的 HTML 怎么插入页面并激活 layui 组件
laytpl 只管生成字符串，不处理 DOM 插入、事件绑定或表单控件重渲染——这三步全得手动补上。
- 插入用
element.innerHTML = html或$('#container').html(html)即可，但注意容器是否被display: none隐藏（某些弹窗场景会因此看不见内容） - 如果模板含
layui-form表单，插入后必须显式调用form.render('select')或form.render()，否则下拉框、开关等不会初始化 - 若模板含
lay-filter，监听事件时要确保form.on('submit(filterName)', ...)在渲染之后注册，否则事件不触发 - layer 弹窗中使用时，别把
content直接设为模板字符串，而应先渲染成 HTML，再传给layer.open({ content: html })，否则{{ d.xxx }}会被当纯文本显示
为什么 render() 有时返回空、有时卡住、有时报错
绝大多数异常不是 laytpl 本身的问题，而是模板语法或数据结构不匹配导致的静默失败。
-
render()同步调用时返回空字符串，90% 是因为模板字符串为空、或d是null/undefined——加个console.log(tplStr, data)能立刻定位 - 异步调用写成
render(data, callback)却没传 callback，会抛TypeError: callback is not a function，但错误堆栈指向 laytpl 内部，容易误判 - 模板中用了 ES6 语法（如箭头函数、可选链），老版本浏览器会直接报 JS 解析错误，而 laytpl 的
{{# }}块里只支持 ES5 - 如果模板里写了
{{# console.log(d) }}这类调试语句，上线前务必删掉——它不会被移除，且可能污染全局作用域或引发 CSP 报错
事情说清了就结束。真正难的不是语法，而是每次改完模板都要同步检查数据结构、DOM 插入时机、组件重渲染三者是否对齐——少一环，页面就“看起来没变”。
