javascript - jquery - xeditable select source using function，使用延迟和本地存储(indexedDB)

Question

我正在为我工​​作的公司开发一个网络应用程序，但我对所需的表格有疑问。

我在使用 xeditable 使用来自不同函数的数据填充选择列表时遇到了一些麻烦。

问题是正在执行以填充选择框的代码不会等待其他函数从本地存储中获取数据并返回它，即使我正在使用延迟，(我不确定我是否正在正确使用延迟/解析功能)。

这是我的代码:

<a id="TypeID" data-type="select" data-pk="1966_TypeID" data-original-title="Please Select" data-pid="36" class="editable editable-click">3609</a>

j查询:

function popSelectBox(PID) {
    var rtn = [];
    $.indexedDB('testDatabase').objectStore('Lookup').index('PID').each(function (i) {
        var source = {};
        source.value = i.value.ID;
        source.text = i.value.Name;
        rtn.push(source);
    }, PID).done(function (r, e) {
        console.log(rtn);
        console.log('popSelectBox function (I expect to see this first) - This section should complete before the makeEditable function');

        return rtn;
    });
}

function makeEditable() {
    $('.editable').editable({
        validate: function (value) {
            if ($.trim(value) === '') {
                return 'This field is required';
            }
            return false;
        },
        success: function (response, newValue) {
            console.log($(this).data('pk'), newValue);
            //$(this).parent().css('background-color', 'green');
        },
        /**** this is the problem section of this function ****/
        source: function () {
            //if the type is a select list then we need to populate it, this is done here
            if ($(this).data('type') === 'select') {
                var d = $.Deferred();
                $.when(d).done(function (v) {
                    console.log(v);
                    return v;
                });
                d.resolve(popSelectBox($(this).data('pid').toString()));
                console.log('makeEditable function (I expect to see this last) - This section should wait for the popSelectBox function to finish');
            }
        }
    });
}

我这里也有一把 fiddle http://jsfiddle.net/f8otrayn/3/显示以上内容。这个 fiddle 中包含一个我正在使用的本地存储设置示例，设置它的函数是存在的，但是我已经注释掉了函数调用，您可以检查代码并根据需要取消注释。

我正在寻找一种方法来等待 popSelectBox 函数完成并返回数据，以便我可以使用该数据来填充选择框，我真的不想使用 setTimeout，因为本地存储中有很多条目因此等待特定时间段可能并非在所有情况下都有效。

有没有人有什么想法

谢谢

Answer 1

最后我们不得不走另一条路，我们没有在最初构建表单时添加功能，而是将功能添加到点击事件

x-editable 仍然无法从函数填充源，因此按照建议运行代码(在范围内)之前从 IndexedDB 获取正确的值并将结果数组添加为源

以下代码供引用

$( document ).on('click', '.editable-select', function(){
    var arr = [];
    $.indexedDB( 'testDatabase' ).objectStore( 'Lookup' ).index( 'PID' ).each( function( i ) {
        if (i.value.Act === '1') {
            arr.push({
                value: i.value.ID,
                text:i.value.Name
            });
        }
    },$(this).data( 'pid' ).toString()).done( function( r, e ){
        //
    });

    /** setting the options has changed **/
    $(this).editable('option', 'source', arr);
    $(this).editable('option', 'success', function(response, newValue) {
        console.log($(this).data('pk'), newValue);
    });
});

您会注意到设置可编辑的选项已更改，以这种方式设置源:

$('.editable').editable({
    validate: function() {...}),
    success: function() {...}),
    source: function() {
        return arr;
    }
});

由于某种原因没有工作