在项目中使用多个 Kendo PanelBar 实例

Question

我只是通过构建一个混合应用程序来学习 Kendo Mobile UI。目前我正在使用 Kendo PanelBar 小部件在我的应用程序中制作一些可折叠的菜单，如下所示：

  <ul id="panelBar">
    <li class="child"><strong>What sound was that?</strong>
      <ul>
        <li><em>The sound was from a cow.</em></li>  
      </ul>
    </li>
  </ul>

这里是 Javascript：

<script>
    $(document).ready(function() {
        $("#panelBar").kendoPanelBar();
    });
</script>

好的，Panelbar 正在处理第一个被调用的视图（使用它）。但是，如果我导航到使用它的任何其他视图 - 它根本不会呈现。

现在这是否与我使用 $(document).ready(function() 调用它有什么关系？

更新：我尝试在视图 div 中使用 data-show="onShow"，然后使用关联的函数来初始化面板栏，但这对我来说也不起作用。看来剑道面板栏只能用这种方式启动一次。

我很确定在单独的 HTML 页面中使用多个实例时，Kendo PanelBar 存在缺陷。

Answer 1

这可能是因为您为元素分配了一个 ID。 Kendo UI Mobile 将您的所有视图保留在 DOM 中，但隐藏不可见的视图。 这意味着您将拥有多个具有相同 ID 的元素，这不是有效的 HTML，并且 jQuery 选择器$("#panelBar") 只会返回在 DOM 中找到的第一个元素，它可能位于隐藏页面上。

您可以尝试为每个页面设置不同的 ID。

---

另外，$(document).ready() 只会在应用启动时触发一次，而不是在查看每个页面时触发。

---

如果您没有将任何选项传递给 .kendoPanelBar() 函数，那么您可能只想使用类而不是 ID。

<ul class="panelBar"> ... </ul>
<ul class="panelBar"> ... </ul>
<ul class="panelBar"> ... </ul>

$(".panelBar").kendoPanelBar();

---

或者使用 MVVM 方法并在每个元素上设置data-role...

<ul data-role="panelbar"> ... </ul>
<ul data-role="panelbar"> ... </ul>
<ul data-role="panelbar"> ... </ul>

没有对 .kendoPanelBar() 的 javascript 调用