解决layui模版默认分隔符的冲突问题

吴宇 2019-11-26 76℃ 0条

Laravel框架的blade模板分隔符与layui的模板分隔符一样导致解析的时候有报错,而layui的数据表格组件的源码中已经将分隔符写死,所以无法通过laytpl.config自定义模板分隔符来解决问题,只能通过在{{}}前加上@来解决。

       最近做的一个项目后台php框架用的是 Laravel,前端框架用的是 Layui,在使用 Layui 的数据表格组件时发现模板分隔符与 Laravel 有冲突,查看Layui文档可以自定义分隔符:

laytpl.config({
    open: '<%',
    close: '%>'
});

       但是使用后,页面上却出现了一堆代码:

{{# if(d.data.toolbar){ }}

{{# } }}
{{# if(d.data.loading){ }}{{# } }}{{# var left, right; }}
{{# layui.each(d.data.cols, function(i1, item1){ }}{{# layui.each(item1, function(i2, item2){ }}{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}{{# if(item2.fixed === "right"){ right = true; } }}{{# var isSort = !(item2.colGroup) && item2.sort; }}{{# }); }}{{# }); }}
{{# if(item2.type === "checkbox"){ }}{{# } else { }}{{item2.title||""}}{{# if(isSort){ }}{{# } }}{{# } }}

{{# if(item2.type === "checkbox"){ }}{{# } else { }}{{item2.title||""}}{{# if(isSort){ }}{{# } }}{{# } }}

       这是因为 Layui 的数据表格中的模板分隔符写死的,使用 laytpl 自定义分隔符后出现解析异常。所以不能通过自定义 Layui 模板分隔符来解决问题。

       通过查找Laravel文档发现文档对这个问题有所讨论:

由于许多 JavaScript 框架也使用「大括号」在浏览器中显示指定的表达式,因此可以使用 @ 符号来告知 Blade 渲染引擎该表达式应该维持原样。

<h1>Laravel</h1>
Hello, @{{ name }}.

在这个例子中,@ 符号会被 Blade 移除。而且,Blade 引擎会保留 {{ name }} 表达式,如此一来便可跟其它 JavaScript 框架一起应用。

       所以把 {{ d.id }} 改成 @{{ d.id }} 即可解决问题。

标签: 前端layui

非特殊说明,本博所有文章均为博主原创。