twitter-bootstrap-3 - 将 SSJS 操作添加到引导药丸中

Question

我添加了一个简单的药丸列表作为导航器:

<div class="container-fluid">
        <ul class="nav nav-pills">
            <li role="presentation" class="active">
                <a href="#">Profiles</a>
            </li>
            <li role="presentation">
                <a href="#">Applications</a>
            </li>
            <li role="presentation">
                <a href="#">Automation</a>
            </li>
        </ul>
    </div><!-- COntainer -->

如果我只想添加一个 href 链接，那么它工作得很好，但我需要在单击药丸时运行一些 SSJS。刚刚开始 BootStrap 山，所以这也许是不可行的。我进行了搜索，但无法找到如何做到这一点。任何帮助表示赞赏。

谢谢

Answer 1

使用<xp:link>而是 HTML <a> 。它允许您使用 SSJS 代码添加点击事件:

<div class="container-fluid">
    <ul class="nav nav-pills">
        <li role="presentation" class="active">
            <xp:link
                escape="true"
                text="Profiles"
                id="link1">
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:print("your SSJS code")}]]></xp:this.action>
                </xp:eventHandler>
            </xp:link>
        </li>
        <li role="presentation">
            <xp:link
            ...

<xp:link>被渲染为 <a>标签终于喜欢了

<a id="view:_id1:link1" href="#" class="xspLink">Profiles</a>

您在评论中询问如何添加 data-toggle="tab"渲染<a ...> 。您可以使用 <xp:this.attrs> 来完成此操作<xp:link>内:

        ...
            <xp:link
                escape="true"
                text="Profiles"
                id="link1">
                <xp:this.attrs>
                    <xp:attr
                        name="data-toggle"
                        value="tab">
                    </xp:attr>
                </xp:this.attrs>
                <xp:eventHandler
                    event="onclick"
        ...

渲染后的链接如下所示

<a id="view:_id1:link1" href="#" class="xspLink" data-toggle="tab">Profiles</a>