无法使用KnockoutJS扩展KendoPanelBar - 为什么？

Question

我想在Kendo Panelbar中显示有孩子的各种人。 Atm它看起来像这样：

没有机会扩展＆＃34;父母＆＃34;人。

如果仔细观察边框的宽度，您可以看到谁是孩子，谁不是。或者让我用其他话来解释......每个孩子也可以生孩子，而且由于边界宽度，你可以看到谁是谁的孩子。

父母是没有边界btw的人。该列表由KnockoutJS动态填充。

<ul data-role="panelbar" data-bind="template: { name: 'person-template', foreach: personList, callbackElementOnce: function () { return initKendoPanelBar($element) } }">
</ul>

<ul data-role="panelbar" data-bind="template: { name: 'person-template', foreach: ascendantList, afterRender: initKendoPanelBar($element) }">
</ul>

一个用于父母，一个用于孩子。 initKendoPanelBar -function通常应该将PanelBar从列表中删除。

function initKendoPanelBar(element) {
            $(element).kendoPanelBar({ expandMode: "single" });
        };

但它没有，我也不知道为什么。在某种程度上，列表已经被格式化为PanelBar，因为列表看起来不会那么疯狂，但正如我所说，它不会让我扩展任何东西。

提前致谢！

Answer 1

Knockout让您有机会使用foreach绑定呈现的元素“做点什么”。这是它在模板绑定中的工作方式：

data-bind="template: {
  name: templateName, 
  foreach: items, 
  afterRender: afterRenderMethod
}"

afterRenderMethod必须是一个像这样的函数：

  每次foreach块被复制并插入到文档中时都会调用afterRender - 在foreach首次初始化时以及稍后将新条目添加到关联数组时。 Knockout将为您的回调提供以下参数：（1）插入的DOM元素的数组，（2）绑定它们的数据项

（https://httpbin.org/，强调我的）

这意味着您的initKendoBar必须接受数组元素。

function initKendoPanelBar(elements, data) {
  // TODO: check nr of elements and select the right one(s)
  $(elements[0]).kendoPanelBar({ expandMode: "single" });
};

在数据绑定中添加它的方式是不，如下所示：afterRender: initKendoPanelBar($element)（这已经调用了函数），但是如此：afterRender: initKendoPanelBar。

为了举例说明这一切是如何运作的，请查看这个小提琴：source

P.S。我真的没有callbackElementOnce来自哪里，我以前从未见过它。这就是为什么我犹豫不决回答你的问题。我认为您应该只使用template绑定和afterRender来解决问题。