Javascript 在项目中使用剑道PanelBar的多个实例

我只是通过构建一个混合应用程序来学习剑道移动用户界面。目前，我正在使用剑道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>

$（文档）.ready（函数（）{
$（“#panelBar”）.kendoPanelBar（）；
});

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

现在，这是否与我使用$（document.ready）（function（）调用它有关

更新：我尝试在视图div中使用data show=“onShow”，然后使用相关函数初始化面板栏，但这对我也不起作用。似乎剑道面板栏只能以这种方式启动一次

---

我敢肯定，当在单独的HTML页面中使用多个实例时，Kendo PanelBar是有缺陷的。

这可能是因为您为元素分配了一个ID。 KendoUIMobile将所有视图保留在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();

---

不使用javascript调用.kendoPanelBar（）

导航到另一个表示不同页面的视图？只要调用.kendoPanelBar（））在每次加载时，您都应该表现良好。您是否遇到任何javascript错误？我遇到了未捕获的引用错误：媒体未定义。但我非常确定这与我使用的Cordova Media API插件有关，因为在iOS模拟器中运行时，没有明显的问题。其他视图中的面板栏是否使用新的URL？是的，视图位于单独的HTML页面中。每个页面上都会调用.kendoPanelBar（）？你的朋友，你是一个拥护者！我向ul添加了一个类，并保留了ID（因为我附加了样式），并在javascript初始化中使用了该类而不是ID。另外，我现在使用的是data show=“onShow”在view div中，然后在函数下进行适当的js初始化，而不是$（document）.ready（）带有数据角色的MVVM方法对我不起作用。顺便说一句，我访问了你的博客，发现它非常有用，请继续努力！

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