在自定义控件的 SSJS 中读取值编辑框

Question

>我有一个自定义控件，在模态中带有编辑框：

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

在一个按钮的onclick事件中，我想读取这个编辑框的值

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的自定义属性计算的 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>