JS：コールバックに別のコールバックの出力を返します。

Question

私はJavaScriptをmagicsuggest pluginで使用しています。

このプラグインには、挿入する前に選択範囲のhtmlを変更できるコールバックselectionRendererがあります。

私がしようとしているのは、ユーザーの入力に基づいてその選択htmlを変更することです。

私はそれを設定しているので、selectionRendererコールバックは内部にフォームを持つブートストラップモーダルを開きます。そのフォームが送信されると、別の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'); 
    }); 

DEMO