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

Using multiple instances of Kendo PanelBar in project

本文关键字：Kendo PanelBar 实例 项目      更新时间：2023-09-26

我只是通过构建一个混合应用程序来学习剑道移动UI。目前我正在使用剑道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"，然后使用相关的函数来初始化面板栏，但这也不适合我。似乎剑道面板栏只能通过这种方式启动一次。

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

这可能是因为您为元素分配了一个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>

没有javascript调用。kendopanelbar ()

相关文章：