Question

我想通过SSJS添加自定义控件，就像我可以添加组件一样（“组件树注入”http://openntf.org/XSnippets.nsf/snippet.xsp?id=component-tree-injection）但我无法让它发挥作用。

我想在页面上构建一个“新人”按钮，每次用户点击它时都会添加一个自定义控件。

首先，我尝试使用repeatControl =“true”通过RepeatControl完成此操作，但这是不可能的，因为我无法重新加载整个Xpage以创建新的CC并丢失该进程中的所有其他数据。（见代码块）

如果您知道在不重新加载页面的情况下动态添加自定义控件的任何其他可能性，请随时解释。 ; - ）

非常感谢！

<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的答案（你刚刚结识我的一天！:)与Dynamically bind an Edit Box in a custom control to a managed bean结合起来，并提出以下代码：

的XPage

<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>
        <xc:ccPersondata id="ccPersondata" BindTo="rowData" />          
    </xp:panel>
</xp:repeat>
<xp:button value="addPerson" id="button1">
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <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>

自定义控制：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>

Answer 1

如果您已经拥有可以创建任意数量的ccPersondata的重复控件，为什么要添加自定义控件手册。我不会通过使用组件注入来添加控制手册，而只是向重复的数组添加另一个空值（就像空的Person对象/数组一样，无论你用什么来保存人的数据）并刷新重复控件。 / p>

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

<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>

在您的情况下，而不是SSJS对象，我会根据您的需要使用java类或文档。另外我会使用一个java类来处理重复的数据，这样你就可以用这个类处理函数（新人，或者保存Person）.maby包括一个方法addPersonOnPsoition（）....

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

1 个答案: