[英]AlloyUI Form Builder trying to access the elements created dynamically
I have built a dynamic form using AlloyUI form builder. 我使用AlloyUI表单构建器构建了一个动态表单。 I want to capture the elements which ever I drag and drop in the bounding box. 我想捕捉我在边界框中拖放的元素。 I came across something like this: 我遇到过这样的事情:
function saveFieldsForm(){ function saveFieldsForm(){
var formXML = ''; 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);
}
}
});
});
} }
In the above code I understand that the drag and dropped field are being captured but i don't understand the item, index and collection fields inside the function in the very second line of code. 在上面的代码中,我理解正在捕获拖放字段,但我不理解第二行代码中函数内的项目,索引和集合字段。 What are these values and from where are these getting populated? 这些价值是什么以及这些价值从何而来? Please help!!! 请帮忙!!!
The myFormBuilder.get('fields')
returns an Alloy UI ArrayList which is where you get the each
function. myFormBuilder.get('fields')
返回一个Alloy UI ArrayList ,它是您获取each
函数的地方。 The parameters for the callback
come from "within" the ArrayList
. callback
的参数来自ArrayList
“内部”。
I recently used the form-builder and captured my form in a very similar manner. 我最近使用了表单构建器并以非常类似的方式捕获了我的表单。 However, I saved mine as JSON
. 但是,我把我保存为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
is the "current" item being provided by the each
function. item
是each
函数提供的“当前”项。 index
is the position of that item at its depth within its bounding element index
是该项目在其边界元素内的深度位置 I did not use the collection
parameter, so I had to investigate. 我没有使用collection
参数,所以我不得不调查。 It appears the collection represents all of the elements at the same depth of item
within a specific bounding element. 看起来集合表示特定边界元素中item
的相同深度处的所有元素。 In other words, if item
is nested within some other element, then the collection is scoped only to that parent
. 换句话说,如果item
嵌套在某个其他元素中,则该集合的范围仅限于该parent
。
Imagine each
has provided Text Box
. 想象一下, each
都提供了Text Box
。 That will be item
, with index
of 0, and collection
will be an ArrayList with two elements (I'll use javascript syntax for simplicity) [{formElement: Text Box},{formElement: Radio Buttons}]
. 这将是item
, index
为0, collection
将是一个包含两个元素的ArrayList(为简单起见,我将使用javascript语法) [{formElement: Text Box},{formElement: Radio Buttons}]
。 Next, each
provides Checkbox 1
. 接下来, each
提供Checkbox 1
。 The index
will again be 0 since this is the first element at this "depth" and since it is within Text Box
the collection
will only contain Checkbox 1
and Checkbox 2
. index
将再次为0,因为这是此“深度”的第一个元素,因为它在Text Box
, collection
将只包含Checkbox 1
和Checkbox 2
。 The each
then provides Checkbox 2
, index
is now 1 with collection
being unchanged. 然后each
提供Checkbox 2
, index
现在为1, collection
保持不变。
each
will continue until it has traversed all of the form elements. each
将继续,直到它遍历所有表单元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.