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

Layui2019-11-26 06:46:253600条
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 &amp;&amp; item2.fixed !== "right"){ left = true; } }}{{# if(item2.fixed === "right"){ right = true; } }}{{# var isSort = !(item2.colGroup) &amp;&amp; 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 }}即可解决问题。

评论啦~
暂无评论,快来抢沙发吧!