如何保存和還原AlloyUI FormBuilder字段？

Question

我想保存用戶選擇的和AlloyUI FormBuilder預定義字段。 我嘗試使用JSON.stringify(formBuilder.get('fields')) ，但是出現以下錯誤：

Uncaught TypeError: Converting circular structure to JSON

如何保存（和還原）AlloyUI FormBuilder的字段？

Answer 1

為了保存AlloyUI FormBuilder的字段，可以使用field.getAttributesForCloning()獲得重要的字段屬性。 然后，您可以將這些屬性組合到一個數組中。 最后，您可以將數組轉換為JSON以使用JSON.stringify()保存：

var fields = [];
formBuilder.get('fields').each(function(field) {
    fields.push(field.getAttributesForCloning());
});
fields = JSON.stringify(fields);

如果要還原字段，則可以在JSON上使用JSON.parse() ：

new Y.FormBuilder({
    /* ...your code here... */
    fields: JSON.parse(fields)
}).render();

這是一個使用AlloyUI的示例FormBuilder代碼的可運行示例：

 YUI().use('aui-form-builder', function(Y) { var formBuilder = new Y.FormBuilder({ availableFields: [{ iconClass: 'form-builder-field-icon-text', id: 'uniqueTextField', label: 'Text', readOnlyAttributes: ['name'], type: 'text', unique: true, width: 75 }, { hiddenAttributes: ['tip'], iconClass: 'form-builder-field-icon-textarea', label: 'Textarea', type: 'textarea' }, { iconClass: 'form-builder-field-icon-checkbox', label: 'Checkbox', type: 'checkbox' }, { iconClass: 'form-builder-field-icon-button', label: 'Button', type: 'button' }, { iconClass: 'form-builder-field-icon-select', label: 'Select', type: 'select' }, { iconClass: 'form-builder-field-icon-radio', label: 'Radio Buttons', type: 'radio' }, { iconClass: 'form-builder-field-icon-fileupload', label: 'File Upload', type: 'fileupload' }, { iconClass: 'form-builder-field-icon-fieldset', label: 'Fieldset', type: 'fieldset' }], boundingBox: '#myFormBuilder', fields: [{ label: 'City', options: [{ label: 'Ney York', value: 'new york' }, { label: 'Chicago', value: 'chicago' }], predefinedValue: 'chicago', type: 'select' }, { label: 'Colors', options: [{ label: 'Red', value: 'red' }, { label: 'Green', value: 'green' }, { label: 'Blue', value: 'blue' }], type: 'radio' }] }).render(); Y.one('#resetFormBuilder').on('click', function(event) { var fields = []; formBuilder.get('fields').each(function(field) { fields.push(field.getAttributesForCloning()); }); fields = JSON.stringify(fields); formBuilder.destroy(); event.target.set('style', 'display: none;'); new Y.FormBuilder({ /* ...your code here... */ boundingBox: '#myFormBuilder', fields: JSON.parse(fields) }).render(); }); }); 

 <script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script> <link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> <div class="yui3-skin-sam"> <button id="resetFormBuilder" class="btn btn-primary"> Reset <code>FormBuilder</code> </button> <div id="wrapper"> <div id="myFormBuilder"></div> </div> </div>