Question

我正在构建一个Web应用程序，我在其中使用此表单构建器插件：https://github.com/dobtco/formbuilder。

我正在尝试添加一个在所有表单字段中都可见的新字段选项。像这样：

Formbuilder.options = {
            BUTTON_CLASS: 'fb-button',
            HTTP_ENDPOINT: '',
            HTTP_METHOD: 'POST',
            AUTOSAVE: false,
            CLEAR_FIELD_CONFIRM: false,
            mappings: {
                SIZE: 'field_options.size',
                UNITS: 'field_options.units',
                LABEL: 'label',
                FIELD_TYPE: 'field_type',
                REQUIRED: 'required',
                ADMIN_ONLY: 'admin_only',
                OPTIONS: 'field_options.options',
                DESCRIPTION: 'field_options.description',
                INCLUDE_OTHER: 'field_options.include_other_option',
                INCLUDE_BLANK: 'field_options.include_blank_option',
                INTEGER_ONLY: 'field_options.integer_only',
                MIN: 'field_options.min',
                MAX: 'field_options.max',
                MINLENGTH: 'field_options.minlength',
                MAXLENGTH: 'field_options.maxlength',
                LENGTH_UNITS: 'field_options.min_max_length_units',
                SAVE_X_INFO: 'save_x_info' /* <--- This is added by me */
            },
            dict: {
                ALL_CHANGES_SAVED: 'All changes saved',
                SAVE_FORM: 'Save form',
                UNSAVED_CHANGES: 'You have unsaved changes. If you leave this page, you will lose those changes!'
            }
        };

此字段选项的HTML代码是使用以下代码生成的：

var infoSelectorHTML = '<div id="infos" style="display:inline-block"></div>&nbsp;&nbsp;<button class="edit" onclick="tagInfo(\'infos\'); return false"><i class="fa fa-plus-circle"></i> Select</button>';
this["Formbuilder"]["templates"]["edit/save_x_info"] = function (obj) {
    obj || (obj = {});
    var __t, __p = '',
        __e = _.escape;
    with (obj) {
        __p += '<div class=\'fb-edit-section-header\'>Save to Infos: </div>' + infoSelectorHTML + '<input id=\'fbInfoHidden\' style=\'display: none\' type="text" data-rv-input="model.' + ((__t = (Formbuilder.options.mappings.SAVE_X_INFO)) == null ? '' : __t) +
            '" />\n\n&nbsp;&nbsp;\n';
    }
    return __p
};

现在，此代码的工作原理如下：

用户点击Select按钮。弹出一个弹出窗口。
从弹出窗口用户中选择他/她的个人资料信息。
该信息的ID保存在#fbInfoHidden文本框中。
现在，表单构建器在保存数据时会提取此ID。

问题从第3步开始。弹出窗口发送的ID不会分配给文本框的值。这是我用来分配它的代码：

function updateFBInfoData(fbInfoData) {
    var fbInfoHidden = $('#fbInfoHidden');
    if (fbInfoHidden != null)
        fbInfoHidden.val(fbInfoData);
}

fbInfoData已从弹出窗口成功接收ID。但是没有分配给fbInfoHidden文本框。请告诉我原因？

我面临的表单构建器中的另一个问题是，在使用fbInfoHidden作为文本框之前，我使用它就像隐藏字段一样。该时间ID已成功分配到fbInfoHidden隐藏字段。但是在保存表单时，它仍然没有获得json数据中save_x_info的值。请告诉我这两种情况中的任何一种解决方案。

此插件使用rivets.js，prototype.js，underscore.js和backbone.js插件，我对这些插件一无所知。因为我现在只使用纯JavaScript和JQuery。所以无法理解很多代码。请告诉我如何配置它以添加自定义字段选项。

更新

这是我初始化表单构建器的方法：

var formDesignData = $('#formDesignData').val();
    if (formDesignData == null)
        formDesignData = '[{}]'
    fb = new Formbuilder({
        selector: '.fb-main',
        bootstrapData: JSON.parse(formDesignData)
    });

    fb.on('save', function (payload) {
        SaveFormDesign(payload);
    })

更新2

未从字段中获取save_x_info的值的原因是，未获取从弹出窗口添加到文本框的数据，但是正在成功获取手动输入的数据。我不知道为什么会这样。但我知道它与rivets.js有关，请你告诉我如何解决它？

无法为dobtco formbuilder插件添加新字段选项

0 个答案: