javascript - AlloyUI Form Builder 尝试访问动态创建的元素

Question

我使用 AlloyUI 表单生成器构建了一个动态表单。我想捕获我在边界框中拖放的元素。 我遇到过这样的事情:

函数 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 函数的地方。 回调的参数来自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 嵌套在某个其他元素中，则集合的范围仅限于该父。

示例

• 文本框
  • 复选框 1
  • 复选框 2
• 单选按钮
  • 复选框 3

想象每个都提供了文本框。这将是 item，index 为 0，collection 将是一个包含两个元素的 ArrayList(为了简单起见，我将使用 javascript 语法) [{formElement: 文本框},{formElement: 单选按钮}]。接下来，each 提供Checkbox 1。 index 将再次为 0，因为这是此“深度”的第一个元素，并且由于它位于 Text Box 内，collection 将仅包含复选框 1 和 复选框 2。然后，each 提供 Checkbox 2，index 现在为 1，collection 保持不变。

each 将继续执行，直到遍历完所有表单元素。