Xpages 通过SSJS添加自定义控件（或以任何其他方式动态添加）

我想通过SSJS添加一个自定义控件，就像我可以添加一个组件（“组件树注入”） 但是我不能让它工作

我想在页面上构建一个“New Person”按钮，每当用户单击该按钮时，它都会添加一个自定义控件

首先，我尝试使用RepeatControl=“true”通过RepeatControl实现这一点，但这是不可能的，因为我无法重新加载整个Xpage以创建新的CCs，并且在该过程中丢失所有其他数据。（参见代码块）

如果您知道任何其他无需重新加载页面即可动态添加自定义控件的可能性，请随时解释。；-）

非常感谢

<xp:button value="New Person" id="newPersonButton">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <xp:this.action>
            <![CDATA[#{javascript://
                viewScope.counter = viewScope.counter + 1;
            }]]>
        </xp:this.action>
    </xp:eventHandler>
</xp:button>
<xp:repeat id="repeat1" rows="30" repeatControls="true" var="rowData" indexVar="rowIndex">
    <xp:this.value><![CDATA[#{javascript:return new Array(Number(viewScope.counter))}]]></xp:this.value>
    <xc:ccPersondata id="persondata_${rowIndex}"></xc:ccPersondata>
</xp:repeat>

---

解决方案：对于最终解决方案，我将Michal Saiz（你刚刚创造了我的一天！：）的答案与以下代码结合起来：

XPage

自定义控件：ccPersondata

<xp:label value="Name:" id="label1">
    <xp:inputText id="name">
        <xp:this.value><![CDATA[${javascript:"#{"+compositeData.BindTo+".name}"}]]></xp:this.value>
    </xp:inputText>
</xp:label>
<xp:label value="Age:" id="label2">
    <xp:inputText id="age">
        <xp:this.value><![CDATA[${javascript:"#{"+compositeData.BindTo+".age}"}]]></xp:this.value>
    </xp:inputText>
</xp:label>

---

如果您已经有一个可以创建任意数量ccPersondata的重复控件，为什么要添加自定义控件手册。与使用组件注入添加控制手册不同，我只需将另一个空值添加到重复数组（例如，用于保存人员数据的空人员对象/数组）并刷新重复控件

这里有一个小例子，我的意思是：

<xp:repeat id="repeat1" rows="30" var="rowData" indexVar="rowIndex">
    <xp:this.value><![CDATA[#{javascript://
        var person = function(name,age){
            this.name = name;
            this.age = age;
        }
        if(!viewScope.containsKey('list')){
            viewScope.list = [];
            list.push(new person("victor","24"));
            list.push(new person("Igor","24"));
        }
        return viewScope.list;}]]></xp:this.value>
        <xp:panel>
            <xp:text
                escape="true"
                id="computedField1"
                value="#{rowData.name}">
            </xp:text>
            <br></br>
                                <!-- here is your ccPersonData -->
    </xp:panel>
</xp:repeat>
<xp:button value="addPerson" id="button1">
<xp:eventHandler
    event="onclick" submit="true" refreshMode="partial" refreshId="repeat1">
    <xp:this.action><![CDATA[#{javascript:
        var person = function(name,age){
            this.name = name;
            this.age = age;
        }
        var emptyPerson = new person('none','0');
        viewScope.list.push(emptyPerson);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>

在您的情况下，我将根据您的需要使用java类或文档，而不是SSJS对象。此外，我还将使用一个java类来处理repeat的数据，这样您就可以使用这个类来处理函数（newperson或saveperson）。。可能包括方法AddPersonOnPoion（）

<xp:repeat id="repeat1" rows="30" var="rowData" indexVar="rowIndex">
    <xp:this.value><![CDATA[#{javascript://
        var person = function(name,age){
            this.name = name;
            this.age = age;
        }
        if(!viewScope.containsKey('list')){
            viewScope.list = [];
            list.push(new person("victor","24"));
            list.push(new person("Igor","24"));
        }
        return viewScope.list;}]]></xp:this.value>
        <xp:panel>
            <xp:text
                escape="true"
                id="computedField1"
                value="#{rowData.name}">
            </xp:text>
            <br></br>
                                <!-- here is your ccPersonData -->
    </xp:panel>
</xp:repeat>
<xp:button value="addPerson" id="button1">
<xp:eventHandler
    event="onclick" submit="true" refreshMode="partial" refreshId="repeat1">
    <xp:this.action><![CDATA[#{javascript:
        var person = function(name,age){
            this.name = name;
            this.age = age;
        }
        var emptyPerson = new person('none','0');
        viewScope.list.push(emptyPerson);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>