Question

重要提示：在模板中应使用单个根元素绑定到数组。将产生两个第一级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);

在这两种情况下，只有第一个根元素及其子元素被正确绑定。这表明每次我使用多个元素对模板进行数据绑定时，我需要确保它包含在一个根中。

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

（Sample code as a jsfiddle）

Answer 1

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

源绑定是否需要单个根元素，即使对于非数组？

1 个答案: