AlloyUI表單生成器嘗試訪問動態創建的元素

Question

我使用AlloyUI表單構建器構建了一個動態表單。 我想捕捉我在邊界框中拖放的元素。 我遇到過這樣的事情：

function saveFieldsForm（）{
var formXML ='';

myFormBuilder.get('fields').each(
function(item, index, collection) {
    var dataType = item.get('dataType'),
        indexType = item.get('indexType'),
        label = item.get('label'),
        multiple = item.get('multiple'),
        name = item.get('name'),
        options = item.get('options'),
        readOnly = item.get('readOnly'),
        repeatable = item.get('repeatable'),
        required = item.get('required'),
        showLabel = item.get('showLabel'),
        type = item.get('type'),
        tip = item.get('tip'),
        predefinedValue= item.get('predefinedValue'),
        width = item.get('width');

    var fieldXML = '<field>';
    fieldXML += '<type>' + type + '</type>';
    fieldXML += '<name>' + name + '</name>';
    fieldXML += '<required>' + required + '</required>';
    fieldXML += '<tip>' + tip + '</required>';
    fieldXML += '<predefinedValue>' + predefinedValue + '</predefinedValue>';        
    fieldXML += '</field>';
    alert("fieldXML: "+ fieldXML);
    formXML += fieldXML;
});

formXML += '</root>';
 alert("formXML: "+ formXML);

 AUI().use('aui-io-request',
            function(A) {           

        A.io.request(
            '<%=ajaxURL%>',{
                data: {                         

                    formXML : formXML,

                },
                dataType: 'json',
                on: {                                                                                            
                        success: function(data) {   
                            alert("Your form has been saved!")

                        },

                        error: function(jqXHR, textStatus, errorThrown) {

                            alert("Error, the content has not been saved! Please try again...");    
                            console.log(textStatus, errorThrown);                       

                            }           
                    }
            });    
            }); 

}

在上面的代碼中，我理解正在捕獲拖放字段，但我不理解第二行代碼中函數內的項目，索引和集合字段。 這些價值是什么以及這些價值從何而來？ 請幫忙！！！

Answer 1

myFormBuilder.get('fields')返回一個Alloy UI ArrayList ，它是您獲取each函數的地方。 callback的參數來自ArrayList “內部”。

我最近使用了表單構建器並以非常類似的方式捕獲了我的表單。 但是，我把我保存為JSON 。

var formDefinition = [];

var parser = function(fields, container){
  fields.each(function(item, index) {
    var surveyElement = {};
    var properties = item.getProperties();

    properties.forEach(function(property) {
      var attr = property.attributeName;
      surveyElement[attr] =  item.get(attr); 
    })
    surveyElement.name = item.get('name');

    var children = item.getAttrs()['fields']
    if(children && children.size() > 0){
      surveyElement.children = [];
      parser(children, surveyElement.children);
    }

    container.push(surveyElement);
  });
 }

parser(formBuilder.get('fields'), formDefinition);
var json = JSON.stringify(formDefinition)

• item是each函數提供的“當前”項。
• index是該項目在其邊界元素內的深度位置

我沒有使用collection參數，所以我不得不調查。 看起來集合表示特定邊界元素中item的相同深度處的所有元素。 換句話說，如果item嵌套在某個其他元素中，則該集合的范圍僅限於該parent 。

例

• 文本框
  • 復選框1
  • 復選框2
• 單選按鈕
  • 復選框3

想象一下， each都提供了Text Box 。 這將是item ， index為0， collection將是一個包含兩個元素的ArrayList（為簡單起見，我將使用javascript語法） [{formElement: Text Box},{formElement: Radio Buttons}] 。 接下來， each提供Checkbox 1 。 index將再次為0，因為這是此“深度”的第一個元素，因為它在Text Box ， collection將只包含Checkbox 1和Checkbox 2 。 然后each提供Checkbox 2 ， index現在為1， collection保持不變。

each將繼續，直到它遍歷所有表單元素。