Kendo MVVM-模板未更新

Question

在代码段中，我想通过更改数组的项来更新剑道模板。

问题是：它更新了data-bind="text: foo"，但没有更新#:foo#。

为什么？

var viewModel = kendo.observable({
    myArray: [
      {foo: 'foo not updated'}
    ],
    update() {
      this.set('myArray[0].foo', 'foo updated!')
    }
});
kendo.bind($(document.body), viewModel);

<div data-bind="source: myArray" data-template="tmp"></div>

<script id="tmp" type="text/x-kendo-template">
  <div data-bind="text: foo"></div>
  <div>#:foo#</div>
</script>

<button type="button" data-bind="click: update">Update</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>