Kendo Grid DetailTemplate绑定自定义数据时出现Uncaught ReferenceError: FirstName is not defined错误排查

你遇到的这个ReferenceError其实是Kendo Grid的执行顺序搞的鬼！

当你在Grid初始化时配置了detailTemplate，Grid会在用户展开行的第一时间自动渲染这个模板，并且默认把当前行的数据源数据传入模板里。但你的行数据里并没有FirstName字段，所以模板里的#= FirstName #自然就找不到这个变量，直接抛出错误了——这时候你的detailInit函数还没来得及执行你写的自定义模板渲染逻辑呢！

方案一：完全手动控制详情模板渲染（推荐） #

直接去掉Grid配置里的detailTemplate，把所有渲染逻辑都放到detailInit里，这样就不会触发Grid默认的模板渲染行为：

修改Grid初始化代码 #

$("#device-grid").kendoGrid({
    // 移除detailTemplate配置
    detailInit: detailInit,
    // 其他原有配置项保留
});

调整detailInit函数 #

同时把模板渲染的目标改为当前展开的详情行（避免全局选择器污染其他行）：

function detailInit(e) {
    console.log("detailInit started: " + CurrentTimeString());
    var detailRow = e.detailRow;
    var template = kendo.template($("#detailTemplate").html());
    // 你的模拟数据
    var data = { FirstName: "Test" };
    var renderedContent = template(data);
    // 将渲染结果直接插入当前详情行
    detailRow.html(renderedContent);
    // 初始化当前行内的TabStrip
    detailRow.find(".detailTabstrip").kendoTabStrip({
        animation: { open: { effects: "fadeIn" } }
    });
    console.log("detailInit ended: " + CurrentTimeString());
};

模板代码保持不变即可。

方案二：保留Grid默认模板作为占位符 #

如果你想保留detailTemplate作为初始占位，可以把模板改成空容器，然后在detailInit里用自定义数据填充：

修改原模板为占位容器 #

<script type="text/x-kendo-template" id="detailTemplate">
    <div class="detailTabstrip"></div>
</script>

新增内容模板 #

单独把需要渲染的内容放到新模板里：

<script type="text/x-kendo-template" id="detailContentTemplate">
    First Name: #= FirstName #
</script>

调整detailInit函数 #

function detailInit(e) {
    console.log("detailInit started: " + CurrentTimeString());
    var detailRow = e.detailRow;
    // 使用新的内容模板
    var template = kendo.template($("#detailContentTemplate").html());
    var data = { FirstName: "Test" };
    var renderedContent = template(data);
    // 找到当前详情行里的容器并填充内容
    detailRow.find(".detailTabstrip").html(renderedContent);
    // 初始化TabStrip
    detailRow.find(".detailTabstrip").kendoTabStrip({
        animation: { open: { effects: "fadeIn" } }
    });
    console.log("detailInit ended: " + CurrentTimeString());
};

这样Grid初始化时只会渲染一个空的容器，不会报错，之后detailInit再用你的自定义数据替换内容。

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