在自定义控件中读取ssjs中的value编辑框

Question

我有一个带有模态编辑框的自定义控件：

<xp:inputText id="inputText1"></xp:inputText>

在按钮的onclick事件中，我想读取此editbox的值

var demo = getComponent("inputText1").getValue();

当然，这在自定义控件中不起作用，因为他没有inputText1的句柄。 如何才能做到这一点 ？

编辑

我在此发布“完整”代码。 即使有作用域变量，它也不起作用....：:(

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.resources>
    <xp:styleSheet href="bootstrap-modal.css"></xp:styleSheet>
    <xp:script src="/bootstrap-modalmanager.js" clientSide="true"></xp:script>
    <xp:script src="/bootstrap-modal.js" clientSide="true"></xp:script>
    <xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

<div id="Modal1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal One</h4>
</div>

<div class="modal-body">
<p>Modal 1 </p>
<div class="form-group">
    <label for="inputText1">First Name:</label>
        <xp:inputText id="inputText1" value="#{viewScope.input1}">
            <xp:this.attrs>
                <xp:attr name="class" value="form-control"></xp:attr>
                <xp:attr name="data-tabindex" value="1"></xp:attr>
            </xp:this.attrs>
        </xp:inputText>
</div> 

<xp:button value="Demo" id="button2">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="partial" refreshId="demoPanel">
        <xp:this.action><![CDATA[#{javascript:viewScope.message = "input1 = "+viewScope.input1;}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

<xp:panel id="demoPanel">
    <xp:text escape="true" id="computedField1"
        value="#{viewScope.message}">
    </xp:text>
</xp:panel>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(function(){
x$("#{id:button1}").click(function(){
x$("#{id:Modal1}").modal(
{backdrop: true,
keyboard: false,
show: true
}
);
});
});
]]></xp:this.value>
</xp:scriptBlock>

<xp:button value="Login" id="button1" styleClass="btn btn-info btn-lg">
</xp:button>

</xp:view>

Answer 1

Tim Tripcony的建议是去模型层，而不是组件。 一如既往，他在现场。 将“编辑框”绑定到某些对象，在这种情况下可能是viewScope变量。 然后从中获取值。 它可能比getComponent()更有效。

Answer 2

有两种方法值得一试：

1. 将按钮添加到自定义控件中，这样就可以直接使用它。

2. 设置要从控件control-id的自定义属性计算出的control-id并传递一个字符串，例如my-made-up-id ，然后从该自定义控件中通过任意按钮引用它。 请注意，计算ID时需要${}绑定。

自订控制

<xp:inputText
        id="${javascript:compositeData.control-id}">
    </xp:inputText>

网页

<xc:FieldTest control-id="my-made-up-id"></xc:FieldTest>

    <xp:button
        value="Get Value"
        id="button1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete">
            <xp:this.action><![CDATA[#{javascript:var demo = getComponent("my-made-up-id").getValue();
print("Demo: " + demo);}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>