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

Question

我想在剑道面板栏中显示各种有孩子的人。自动取款机看起来像这样：

没有机会扩展“父”人。

如果您仔细观察边框的宽度，您可以看出谁是孩子，谁不是。或者让我换个说法来解释一下。每个孩子也可以有孩子，并且由于边框宽度，您可以看到谁是谁的孩子。

顺便说一句，父母是没有边界的人。该列表由 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-函数通常应该使 PanelBar 脱离列表。

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

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

提前致谢！

Answer 1

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

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

afterRenderMethod 必须是这样的函数：

afterRender — 每次复制 foreach 块并将其插入文档时调用，无论是在 foreach 首次初始化时，还是稍后将新条目添加到关联数组时。 Knockout 将为您的回调提供以下参数：(1) 插入的 DOM 元素的数组，(2) 绑定它们的数据项

（source，强调我的）

这意味着您的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。

为了给你一个例子来说明它是如何工作的，看看这个小提琴：https://jsfiddle.net/sve52r7n/

附：我真的不知道callbackElementOnce 来自哪里，我以前从未见过它。这就是为什么我犹豫要不要回答你的问题。我认为您应该能够仅使用 template 绑定和 afterRender 来解决它。