在XPages中使用SSJS或CSJS切换药丸或导航可见属性

Question

我有一个相当复杂的SSJS片段，它确定一个特定的药丸在ul class="nav nav-药丸"导航器中，当前SSJS设置viewScope。vsPillVisible为true或false。到目前为止一切顺利。现在我要怎么把它放到药片里。假设药片列表是这样的:

<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发送到浏览器)到其他东西，或者如果渲染属性返回false，可能根本不被渲染。

你的问题代码只是html，将被发送到浏览器，因为它是。你现在的问题是如何隐藏你的html代码的一部分取决于一个viewScope变量。

一个常见的方法是围绕你的XPages/html标签的<xp:panel>部分…</xp:panel> .

你可以添加一个渲染属性到这样的面板，并根据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>

整个<li class="dropdown">…</li>块不会被渲染(=发送到浏览器)，如果viewScope。vsPillVisible为false。

通常是面板标签<xp:panel>…</xp:panel>被渲染到<div>…</div>。如果你不想这样，只需添加一个属性disableOutputTag="false"到面板标签。