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（）来调用它？

更新：我尝试使用data-show =＆＃34; onShow＆＃34;在视图div中，然后使用相关的函数初始化面板栏，但这对我来说也没有用。似乎剑道面板栏只能以这种方式启动一次。

我非常确定在单独的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>

没有javascript调用.kendoPanelBar（）

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

1 个答案: