即使对于非数组，源绑定也需要单个根元素吗？答案

【问题标题】：Does source binding require a single root element even for non-arrays?即使对于非数组，源绑定也需要单个根元素吗？
【发布时间】：2014-05-28 21:01:55
【问题描述】：

documentation on source binding 有一个说明：

重要提示：模板中应使用单个根元素绑定到数组。拥有两个第一级 DOM 元素将导致行为不稳定。

但是，我发现即使是非数组也是如此。

我有以下 HTML，它设置了两个由两个模板填充的 div。唯一的区别是工作模板将该数据绑定跨度包装在一个 div 中。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<title>JS Bin</title>
  <script id="broken-template" type="text/x-kendo-template">
      Foo: <span data-bind="text: foo"></span><br/>
      Foo Again: <span data-bind="text: foo"></span>
  </script>
  <script id="working-template" type="text/x-kendo-template">
      <div>
            Foo: <span data-bind="text: foo"></span><br/>
            Foo Again: <span data-bind="text: foo"></span>
      </div>
  </script>
</head>
<body>
  <div id="broken-div" data-template="broken-template" data-bind="source: this">
  </div>
  <br/>
  <br/>
  <div id="working-div" data-template="working-template" data-bind="source: this">
  </div>
</body>
</html>

而 JavaScript 只是创建一个具有单个属性的视图模型并将其绑定到两个 div：

var viewModel = kendo.observable({foo: "bar"});

kendo.bind($("#broken-div"), viewModel);
kendo.bind($("#working-div"), viewModel);

在这两种情况下，只有第一个根元素及其子元素被正确绑定。这表明每次我将数据绑定到具有多个元素的模板时，我都需要确保它被包装在一个根中。

这种行为是否记录在某处？ Kendo 或我的示例代码中是否存在错误？关于剑道为什么需要单根的解释也很好听。

(Sample code as a jsfiddle)

【问题讨论】：

标签： kendo-ui kendo-mvvm kendo-template

【解决方案1】：

除了您提到的一个地方外，没有记录。这就是 Kendo UI 文档的状态——它还不够完整。我已经使用 Kendo UI 三年了，据我所知，这是它的默认行为，而不是错误。不幸的是，这是您从经验中学到（偶然发现）的众多怪癖之一。

【讨论】：