在 XPages 中使用 SSJS 或 CSJS 切换 Pill 或 Nav 可见属性

Question

我有一个相当复杂的 SSJS 片段，它确定在 SSJS 将 viewScope.vsPillVisible 设置为 true 或 false 时 ul class="nav nav-pills" 导航器中的特定药丸.到目前为止，一切都很好。现在我该如何将其放入药丸中。暂时假设药丸列表如下所示：

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown” href="#">Menu 1
<spanclass="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>

如果 vsPillVisible == false 我现在想隐藏下拉选项卡我认为我需要设置一个属性但不确定可以在 SSJS 中完成然后设置什么属性。任何帮助表示赞赏。

Answer 1

您通常可以将 SSJS 代码添加到以 <xp:、<xe: 或 <xc: 开头的标签中。它们被渲染（= html 发送到浏览器）到其他东西或者如果渲染属性 returns false.

可能根本不会被渲染

您的问题代码只是 html，将按原样发送到浏览器。您现在的问题是如何根据 viewScope 变量隐藏部分 html 代码。

一种常见的方法是用 <xp:panel> ... </xp:panel>.

包围 XPages/html 标签的一部分

您可以将呈现的属性添加到此类面板，并根据 SSJS 代码有条件地呈现整个块。在你的情况下，它可能看起来像这样

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <xp:panel rendered="#{viewScope.vsPillVisible}">
        <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown” href="#">Menu 1
              <span class="caret"></span></a>
           <ul class="dropdown-menu">
                ...
           </ul>
        </li>
    </xp:panel>
    ... 
</ul>

如果 viewScope.vsPillVisible 为 false，则整个 <li class="dropdown"> ... </li> 块将不会呈现（= 发送到浏览器）。

通常面板标签 <xp:panel> ... </xp:panel> 会渲染到 <div> ... </div>。如果您不想这样做，只需将属性 disableOutputTag="false" 添加到面板标签即可。

在 XPages 中使用 SSJS 或 CSJS 切换 Pill 或 Nav 可见属性

Toggling a Pill or Nav Visible Property using SSJS or CSJS in XPages

attributes

xpages

xpages-ssjs

twitter-bootstrap-3

在 XPages 中使用 SSJS 或 CSJS 切换 Pill 或 Nav 可见 属性

Toggling a Pill or Nav Visible Property using SSJS or CSJS in XPages

attributes

xpages

xpages-ssjs

twitter-bootstrap-3

在 XPages 中使用 SSJS 或 CSJS 切换 Pill 或 Nav 可见属性