javascript - 带有看似定义的变量的未捕获 ReferenceError

Question

所以我有了这个利用 KendoUI 渲染网格的模板。这是其中的一部分:

<script id="rowTemplateCourse" type="text/x-kendo-tmpl">
  <tr data-cid="#: id #" class="course-row" id="course-row#: id #">
    <td>
      <span class="circle-indicator label-#if(package_is_active == 1){#success#}else{#danger#}#"></span>
    </td>
    <td>
      #: course_name # - #= name#
    </td>
    <td>
      <span class="badge element-bg-color-blue">ver. #:version_number#</span>
    </td>
  </tr>
</script>

我从 php Controller 获取所需的信息，该 Controller 在我的 View 中加载了一个包含此模板的变量。变量保存这种数据:

[1] => Array(
    [id] => 544
    [course_name] => Course for whatever
    [price] => 52
    [logo] => assets/images/new_course.png
    [version_number] => 1
    [parent_version_id] => 0
    [course_price] => 52.00
    [description_for_school] => 
    [is_print_only] => 0
    [offer_pdf] => 0
    [pdf_final_price] => 0.00
    [simple_course] => 0
    [state_id] => 50
    [name] => Tennessee
    [cs_days_to_complete] => 120
    [course_is_active] => 1
    [user_in_course] => no
    [user_is_waiting] => no
    [days_to_complete] => 0)

在我看来，我是这样解析这个变量的:

var course_data = JSON.parse('<?php print(json_encode($courses));?>');

这可以正常工作并返回相同的数据(从 console.log 复制):

1: Object
course_is_active:"1"
course_name:"Course for whatever"
course_price:"52.00"
cs_days_to_complete:"120"
days_to_complete:0
description_for_school:""
id:"544"
is_print_only:"0"
logo:"assets/images/new_course.png"
name:"Tennessee"
offer_pdf:"0"
parent_version_id:"0"
pdf_final_price:"0.00"
price:"52"
simple_course:"0"
state_id:"50"
user_in_course:"no"
user_is_waiting:"no"
version_number: "1"

我像这样在网格中加载数据:

var courses_grid = $("#courses_grid").kendoGrid({
  dataSource: {
    data: course_data,
    schema: {
      model: {
        fields: {
          id: {
            type: "number"
          },
          course_name: {
            type: "string"
          },
          course_short_description: {
            type: "string"
          }
        }
      }
    },
    pageSize: 10,
  },
  toolbar: kendo.template($("#course-header-template").html()),
  rowTemplate: kendo.template($("#rowTemplateCourse").html()),
  groupable: false,
  sortable: true,
  selectable: "single",
  pageable: {
    refresh: true,
    pageSizes: true,
    buttonCount: 5
  },
  columns: [{
    title: "Status",
    width: 100
  }, {
    title: "Course Name",
  }]
});

当页面加载时，我收到一条错误消息，指出 course_is_active 未定义。我不明白它是如何没有定义的，因为它显然在这里并且具有值(value)。有人可以帮我解决这个问题吗？

有关错误的更多信息:

    Uncaught ReferenceError: course_is_active is not defined
(function(data
/**/) {
var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n\t <tr data-cid="'+$kendoHtmlEncode( id )+'" class="course-row" id="course-row'+$kendoHtmlEncode( id )+'">\n          <td>\n              <span class="circle-indicator label-';if(course_is_active == 1){;$kendoOutput+='success';}else{;$kendoOutput+='danger';};$kendoOutput+='"></span>\n          </td>\n\t\t  <td>\n               '+$kendoHtmlEncode( course_name )+' - '+( name)+'\n\t\t   </td>\n\t\t\t<td>\n               <span class="badge element-bg-color-blue">ver. '+$kendoHtmlEncode(version_number)+'</span>\n\t\t   </td>\n\t </tr>\n\n';}return $kendoOutput;
})

Answer 1

我发现了问题。在我的 PHP 代码中，我检查数组中的值是否等于 0，如果是，我将从数组中删除该元素。这恰好是我在 View 中加载的二维数组中的第一个元素，因此当 KendoUI 开始加载表中的变量时，它从 [0] 索引开始，该索引不存在，并抛出错误。感谢所有参与的人。