AlloyUI Form Builder пытается получить доступ к элементам, созданным динамически

Я создал динамическую форму с помощью конструктора форм 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);                       

                            }           
                    }
            });    
            });

}

В приведенном выше коде я понимаю, что поле перетаскивания захватывается, но я не понимаю поля элемента, индекса и коллекции внутри функции в самой второй строке кода. Что это за значения и откуда они берутся? Пожалуйста помоги!!!


javascript xml bounding-box formbuilder alloy-ui
person GeekStyle    schedule 14.05.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

myFormBuilder.get('fields') возвращает ArrayList пользовательского интерфейса Alloy, в котором вы получить функцию 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.

Пример

  • Text Box
    • Checkbox 1
    • Флажок 2
  • Radio Buttons
    • Checkbox 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 будет продолжаться до тех пор, пока не пройдет все элементы формы.

person Origineil    schedule 15.05.2014