data-binding - Xpages 重复绑定(bind)数据

Question

我有一个包含一些数据的重复控件和一个允许用户增加重复行数的按钮。
问题是我不知道用户按了多少次按钮，所以我不知道要在一个表单中创建多少个字段。我可以创建 100 个字段，但这不是一个好习惯。有没有办法从 CSJS 创建一个特定的表单？或者如何将重复中的输入字段绑定(bind)到某些表单字段，以便从重复中保存正确的数据？

我像这样将它与EL绑定(bind):

<xp:repeat id="repeat1" var="test" indexVar="index"
            value="#{javascript:parseInt(sessionScope.dynaField)}" rows="8"
            style="border:1pt">


            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td style="border:1pt;width:32.0%;text-align:center">
                        <xp:inputText id="inputText1" value="#{docrepeat[field1]}">


                            <xp:eventHandler event="onchange" submit="false">
                                <xp:this.script><![CDATA[try
{
var idx="view:_id1:inputText3";
var index=document.getElementById(idx).value;

var number="view:_id1:number";
var val=document.getElementById(number).value;

var sum = val;

for(var i=0;i<index;i++) {
var input1="view:_id1:repeat1:"+i+":inputText1"
var nr1=document.getElementById(input1).value;

sum-=nr1;
document.getElementById("view:_id1:repeat1:"+i+":inputText2").value = sum;
}

document.getElementById("view:_id1:test").value = (sum*100)/val; 

}
catch(e)
{
alert("no");
}]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:inputText>
                        <xp:inputText id="inputText2">

                        </xp:inputText>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:repeat>

但我得到一个空指针异常。为什么？

附言这是整个页面代码:

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

    <xp:this.beforePageLoad><![CDATA[#{javascript:sessionScope.dynaField=parseInt("1");}]]></xp:this.beforePageLoad>




    <xp:this.data>
        <xp:dominoDocument var="docrepeat" formName="repeat"></xp:dominoDocument>
    </xp:this.data>
    <xp:inputText id="inputText3" defaultValue="1">

        <xp:this.converter>
            <xp:convertNumber type="number" integerOnly="true"></xp:convertNumber>
        </xp:this.converter>
    </xp:inputText>

    <xp:inputText id="number" defaultValue="100">
        <xp:this.converter>
            <xp:convertNumber type="number" integerOnly="true"></xp:convertNumber>
        </xp:this.converter>
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="repeat1">
            <xp:this.script><![CDATA[try
{
var idx="view:_id1:inputText3";
var index=document.getElementById(idx).value;

var number="view:_id1:number";
var val=document.getElementById(number).value;

var sum = val;

for(var i=0;i<index;i++) {
var input1="view:_id1:repeat1:"+i+":inputText1"
var nr1=document.getElementById(input1).value;

sum-=nr1;
document.getElementById("view:_id1:repeat1:"+i+":inputText2").value = sum;
}



}
catch(e)
{
alert("no");
}]]></xp:this.script>
        </xp:eventHandler>
    </xp:inputText>
    <xp:inputText id="test">
        <xp:this.converter>
            <xp:convertNumber type="number" integerOnly="true"
                locale="ro" maxFractionDigits="2">
            </xp:convertNumber>
        </xp:this.converter>
    </xp:inputText>
    <xp:panel id="Panel_All" style="text-align:center">

        <xp:pager layout="Previous Group Next" id="pager1" for="repeat1"
            panelPosition="top">
        </xp:pager>
        <xp:repeat id="repeat1" var="test" indexVar="index"
            value="#{javascript:parseInt(sessionScope.dynaField)}" rows="8"
            style="border:1pt">


            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td style="border:1pt;width:32.0%;text-align:center">
                        <xp:inputText id="inputText1">
                            <xp:this.converter>
                                <xp:convertNumber type="number"></xp:convertNumber>
                            </xp:this.converter>
                            <xp:eventHandler event="onchange"
                                submit="false">
                                <xp:this.script><![CDATA[try
{
var idx="view:_id1:inputText3";
var index=document.getElementById(idx).value;

var number="view:_id1:number";
var val=document.getElementById(number).value;

var sum = val;

for(var i=0;i<index;i++) {
var input1="view:_id1:repeat1:"+i+":inputText1"
var nr1=document.getElementById(input1).value;

sum-=nr1;
document.getElementById("view:_id1:repeat1:"+i+":inputText2").value = sum;
}

document.getElementById("view:_id1:test").value = (sum*100)/val; 

}
catch(e)
{
alert("no");
}]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:inputText>
                        <xp:inputText id="inputText2">
                            <xp:this.converter>
                                <xp:convertNumber type="number"></xp:convertNumber>
                            </xp:this.converter>
                        </xp:inputText>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:repeat>



        <xp:br></xp:br>


        <xp:br></xp:br>

        <xp:table style="width:100%">

            <xp:tr>
                <xp:td colspan="2" style="text-align:center">
                    <xp:button value="ADD FIELD" id="button1">
                        <xp:eventHandler event="onclick" submit="true"
                            refreshMode="complete">
                            <xp:this.action><![CDATA[#{javascript:sessionScope.dynaField=parseInt(sessionScope.dynaField)+1
getComponent("repeat1").setValue(parseInt(sessionScope.dynaField));
getComponent("inputText3").setValue(parseInt(sessionScope.dynaField));}]]></xp:this.action>
                        </xp:eventHandler>
                    </xp:button>
                    <xp:button value="REMOVE FIELD" id="button2">
                        <xp:eventHandler event="onclick" submit="true"
                            refreshMode="partial" refreshId="Panel_All">
                            <xp:this.action><![CDATA[#{javascript:sessionScope.dynaField=parseInt(sessionScope.dynaField)-1
getComponent("repeat1").setValue(parseInt(sessionScope.dynaField));
getComponent("inputText2").setValue(parseInt(sessionScope.dynaField));}]]></xp:this.action>

                        </xp:eventHandler>
                    </xp:button>
                </xp:td>

            </xp:tr>
        </xp:table>
        <xp:br></xp:br>
        <xp:button value="Diferenta" id="button4" style="width:200.0px">
            <xp:eventHandler event="onclick" submit="false">

                <xp:this.action>
                    <xp:executeScript>
                        <xp:this.script><![CDATA[#{javascript:getComponent("inputText3").setValue(getComponent("repeat1").getValue());}]]></xp:this.script>
                    </xp:executeScript>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>
    </xp:panel>

    <xp:button value="Save" id="button3">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete" immediate="false" save="true">
            <xp:this.action>
                <xp:openPage name="/xViewRepeat.xsp"></xp:openPage>
            </xp:this.action>
        </xp:eventHandler>
    </xp:button>
</xp:view>

Answer 1

您可以通过以下方式将重复字段保存到文档并从文档中恢复:

收集输入字段中的所有值，并用“#”之类的字符将它们连接到一个字符串

在提交时将此字符串写入文档字段，例如“重复字段”

在 beforePageLoad 读取文档字段“RepeatFields”，将其拆分为一个数组并将其放入 viewScope 变量中，例如“viewScope.fields”

将此 viewScope 变量分配给您的重复

使用 viewScope.fields[index]

将重复输入字段与 viewScope 变量数组的元素连接起来

在面板

中单击添加/删除按钮后重新调整 viewScope 变量数组的大小

这是一个工作示例 XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.data>
        <xp:dominoDocument
            var="document1"
            formName="repeat">
        </xp:dominoDocument>
    </xp:this.data>
    <xp:this.beforePageLoad><![CDATA[#{javascript:
        var fields = [""];
        var repeatFields = document1.getItemValueString("RepeatFields");
        if (repeatFields) {
            fields = repeatFields.split("#");
        }
        viewScope.fields = fields;
        viewScope.dynaField = fields.length;
        }]]></xp:this.beforePageLoad>
    <xp:panel
        id="panelRepeat">
        <xp:this.rendered><![CDATA[#{javascript:    
            if (viewScope.fields.length < viewScope.dynaField) {
                viewScope.fields.push("");
            } else if (viewScope.fields.length > viewScope.dynaField) {
                viewScope.fields.remove(viewScope.fields.length - 1);
            }
            return true;}]]></xp:this.rendered>
        <xp:repeat
            id="repeat1"
            indexVar="index"
            value="#{viewScope.fields}"
            rows="100">
            <xp:inputText
                id="inputText1"
                value="#{viewScope.fields[index]}" />
            <xp:br />
        </xp:repeat>
    </xp:panel>
    <xp:br />
    <xp:button
        value="ADD FIELD"
        id="button1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panelRepeat">
            <xp:this.action><![CDATA[#{javascript:viewScope.dynaField += 1;
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:button
        value="REMOVE FIELD"
        id="button2">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panelRepeat">
            <xp:this.action><![CDATA[#{javascript:viewScope.dynaField -= 1;
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:br />
    <xp:button
        value="Save"
        id="button3">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete"
            immediate="false"
            save="true">
            <xp:this.action><![CDATA[#{javascript:
             document1.replaceItemValue("RepeatFields", viewScope.fields.join('#'));
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
</xp:view>

作为替代方案，您可以将每个输入字段保存到它自己的文档字段中。您将有一个文档字段“NumberRepeatFields”，其中包含输入字段的数量，以及包含值的文档字段“RepeatField0”、“RepeatField1”、“RepeatField2”……。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.data>
        <xp:dominoDocument
            var="document1"
            formName="repeat">
        </xp:dominoDocument>
    </xp:this.data>
    <xp:panel
        id="panelRepeat">
        <xp:inputText
            id="inputNumberFields"
            value="#{document1.NumberRepeatFields}"
            defaultValue="1"
            style="display: none;">
            <xp:this.converter>
                <xp:convertNumber
                    type="number"
                    integerOnly="true">
                </xp:convertNumber>
            </xp:this.converter>
        </xp:inputText>
        <xp:repeat
            id="repeat1"
            rows="1000"
            indexVar="index">
            <xp:this.value><![CDATA[#{javascript:
            var numberRepeatFields = document1.getItemValueInteger("NumberRepeatFields");
            return new Array(numberRepeatFields > 0 ? numberRepeatFields : 1);
            }]]></xp:this.value>
            <xp:repeat
                id="repeat2"
                var="fieldName"
                value="#{javascript:['RepeatField' + index]}">
                <xp:inputText
                    id="inputText1"
                    value="#{document1[fieldName]}">
                </xp:inputText>
                <xp:br />
            </xp:repeat>
        </xp:repeat>
    </xp:panel>
    <xp:br />
    <xp:button
        value="ADD FIELD"
        id="button1">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panelRepeat">
            <xp:this.action><![CDATA[#{javascript:
            var numberRepeatFields = document1.getItemValueInteger("NumberRepeatFields");
            document1.replaceItemValue("NumberRepeatFields", numberRepeatFields + 1);
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:button
        value="REMOVE FIELD"
        id="button2">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panelRepeat">
            <xp:this.action><![CDATA[#{javascript:
            var numberRepeatFields = document1.getItemValueInteger("NumberRepeatFields");
            if (numberRepeatFields > 1) {
                document1.replaceItemValue("NumberRepeatFields", numberRepeatFields - 1);
            }}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
    <xp:br />
    <xp:button
        value="Save"
        id="button3">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="complete"
            immediate="false"
            save="true">
        </xp:eventHandler>
    </xp:button>
</xp:view>