JS:让一个回调返回另一个回调的输出

Question

我正在使用Javascript魔术插件。

此插件具有回调selectionRenderer允许您在插入之前更改所选内容的 html。

我正在尝试做的是根据用户输入更改该选择 html。

因此，我的设置方式是，selectionRenderer回调打开了一个 Bootstrap 模式，其中包含一个表单。然后，为提交该表单时创建另一个submit回调。

我不知道如何将submit回调中收集的数据传递到该selectionRenderer回调中。

$(function() {
var modal = $('#exampleModal');
$('#magicsuggest').magicSuggest({
selectionRenderer: function(data){
modal.modal('show');
var color = 'red';
modal.find('#color-form').submit(function(e) {
e.preventDefault();
color = $(this).find('#color-input').val();
console.log(color);
modal.modal('hide');
});
return '<span style="color: '+color+';">' + data.name + '</span>';
},
allowFreeEntries: false,
data: data
});
});

JSFiddle

如您所见，此示例中的color是在submit回调中收集的，但由于该回调是异步触发的，因此无法将该数据传递给selectionRenderer回调，因为该函数已经返回。

在一个完美的世界中，我显然可以让代码停止并等待回调继续，但由于它是一个插件，我宁愿不分叉和屠宰它。

Answer 1

将打开模式的事件更改为选择事件，并在提交处理程序中查找最后一个标记以更改其颜色

var ms = $('#magicsuggest').magicSuggest({
selectionRenderer: function(data) { 
return '<span class="my-tags">' + data.name + '</span>';
},
allowFreeEntries: false,
data: data
})
$(ms).on('selectionchange', function(e, m) {
modal.modal('show');
});;
$('#color-form').submit(function(e) {
e.preventDefault();
var color = $('#color-input').val();
$('.my-tags:last').css('color', color);   
modal.modal('hide');
});

演示