[英]AlloyUI Form Builder trying to access the elements created dynamically
我使用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);
}
}
});
});
}
在上面的代码中,我理解正在捕获拖放字段,但我不理解第二行代码中函数内的项目,索引和集合字段。 这些价值是什么以及这些价值从何而来? 请帮忙!!!
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
。
想象一下, 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
将继续,直到它遍历所有表单元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.