Kendo UI MVVM表格行迭代：输入标签无数据显示问题

我之前也踩过类似的Kendo模板循环坑，结合你的场景来看，大概率是变量作用域冲突或者组件未重新初始化导致的，给你几个针对性的解决方案：

1. 修复模板变量作用域，避免引用丢失 #

Kendo模板编译后是一个自执行函数，用原生for循环声明的item变量属于函数级作用域，循环结束后所有迭代都会指向最后一个item的引用，这就会导致后面的表格拿不到正确的数据。

把模板里的循环改成Kendo兼容的forEach语法（通过回调函数创建独立作用域），示例如下：

<script type="text/x-kendo-template" id="some-id-table">
  # firstArray.forEach(function(item) { #
    <div>
      <h3>#= item.title #</h3>
      <table>
        <tr>
          <td>
            <input type="checkbox" data-role="switch" checked="#= item.isEnabled #" />
          </td>
          <td>
            <input type="text" value="#= item.content #" />
          </td>
        </tr>
      </table>
    </div>
  # }) #
</script>

用forEach的回调函数隔离作用域后，每个迭代的item都是独立引用，能保证每个表格拿到对应的数据。

2. 确保Switch组件重新初始化 #

如果数据显示正常但Switch组件仍未渲染，说明Kendo没有识别到新生成的DOM元素。模板渲染完成后，需要手动针对新DOM初始化组件：

// 假设渲染后的内容放入指定容器
var container = $("#your-target-container");
var template = kendo.template($("#some-id-table").html());
container.html(template({ firstArray: yourDataList }));

// 只初始化新生成的Switch组件，避免影响已有组件
kendo.init(container.find("[data-role='switch']"));

别直接全局kendo.init($("body"))，否则会重新初始化所有组件，可能引发旧组件的异常。

3. 检查模板语法是否有遗漏闭合 #

有时候模板里的# #标签没闭合、JS代码有语法错误，会导致模板编译失败，后续内容无法正确渲染。比如你有没有漏掉# } #来闭合for循环？可以把模板代码放到Kendo在线模板编辑器里验证，快速排查语法问题。

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