Laravel中使用<script type='text/html'>模板代码报错的解决方法

问题描述 #

在Laravel项目中嵌入一段<script type="text/html">包裹的前端模板代码后，出现以下PHP错误：

Use of undefined constant index - assumed 'index' (this will throw an Error in a future version of PHP)

原模板代码如下：

<script type="text/html">
    <tr data-index="$index">
        <td>{{index+1}}</td>
        <td>{{id}}</td>
        <td class='edit' data-type='textbox' data-field='firstname'>{{firstname}}</td>
        <td class='edit' data-type='textbox' data-field='lastname'>{{lastname}}</td>
        <td class='edit' data-type='dropdown' data-field='color_id' data-source='arr_colors'>{{color_id|select(arr_colors)}}</td>
        <td><button type='button' class='btn btn-danger btn-flat btn-xs' data-bind="rem__click:remRow"  data-id='$index' title='Удалить запись'><i class='fa fa-fw fa-remove'></i></button></td>        
    </tr>
</script>

错误原因 #

Laravel默认使用Blade模板引擎，Blade会将{{ }}语法解析为PHP输出语句。模板中的{{index+1}}被Blade误认为是PHP代码，它试图解析index为PHP常量，但该常量并未定义，因此抛出错误——而实际上这里的{{ }}是前端模板的语法，并非Blade语法。

解决方法 #

方法1：使用Blade的@verbatim指令 #

用@verbatim和@endverbatim包裹整个前端模板代码，告诉Blade跳过对这段代码的解析，保留原始的前端模板语法：

@verbatim
<script type="text/html">
    <tr data-index="$index">
        <td>{{index+1}}</td>
        <td>{{id}}</td>
        <td class='edit' data-type='textbox' data-field='firstname'>{{firstname}}</td>
        <td class='edit' data-type='textbox' data-field='lastname'>{{lastname}}</td>
        <td class='edit' data-type='dropdown' data-field='color_id' data-source='arr_colors'>{{color_id|select(arr_colors)}}</td>
        <td><button type='button' class='btn btn-danger btn-flat btn-xs' data-bind="rem__click:remRow"  data-id='$index' title='Удалить запись'><i class='fa fa-fw fa-remove'></i></button></td>        
    </tr>
</script>
@endverbatim

方法2：修改前端模板的语法分隔符 #

如果你使用的前端模板库支持自定义语法分隔符（比如Handlebars、Underscore模板等），可以将前端模板的{{ }}替换为其他未被Blade使用的分隔符（例如[[ ]]）。这种方法需要对应调整前端模板的解析配置，确保前端能正确识别新的分隔符。

推荐方案 #

优先选择方法1，因为@verbatim是Blade官方提供的解决方案，无需修改前端模板的原有逻辑，配置简单且不易出错。

内容的提问来源于stack exchange，提问作者mySun