通過SSJS（或以任何其他方式動態添加自定義控件）

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> 

---

解決方案：對於最終的解決方案，我從合併塞茲米哈爾的回答（你只讓我很快樂！:)）與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對象/數組無論您使用的是持有人的數據），並刷新重複控件添加控制手冊。

這裏一個小例子，我的意思：

<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類至極處理數據的重複，因此您可以處理功能（新的人員，或保存人）這一類..莫比的方法，包括addPersonOnPsoition（）....