クラス関数からの戻り値

Question

Boostrapに基づいてカスタムアラートのクラスを作成しようとしています。すべてはまだ若いですが、問題が発生しました。クリックイベントが発生した場合にのみ、クリックされたボタンに応じた値を返すにはどうすればよいですか？あなたが見ることができるようにここでは、ここで（テストのために、非常に簡単に）私は値を設定する方法

$modal.on('click', '[data-alertify="cancel"]', function(){ 
     var value = 'no'; 
     $modal.modal('hide'); 
     return value; 
    }); 
    $modal.on('click', '[data-alertify="confirm"]', function(){ 
     var value = 'yes'; 
     $modal.modal('hide'); 
     return value; 
    }); 

を見ることができます私のクラスとテストコードJSFiddle

でモーダルである前に、アラートが（明らかに）表示されます表示されます。私はこれをどのように扱うべきですか？どのように正しい値が返されるのを待ってから警告することができますか？

Answer 1

これらのコールバック関数は非同期的に呼び出され、その中のreturn文によって返された値は、後で利用できないという問題があります。

var ret = Alertify.alert({ 
    content: 'This is MY alert content!' 
}); 

...しかし、ユーザーがまだクリックされていないので、目的の値をAlertify.alert()返さない：プロセス全体が同期した場合、次の構文にのみ動作します。このalert()関数は何も返さず、必ず発生しなければならないクリックの結果を返すことはできません。

このシナリオは約束を導入するのに理想的です。これは、それがどのように見えるかで、あなたはそれを行うとき：

var showModal = function (alert_id) { 
    $('body').append($html); 
    var $modal = $('#' + alert_id); 
    $modal.modal('show'); 
    var dfd = $.Deferred(); // create a promise 
    $modal.on('click', '[data-alertify="cancel"]', function(){ 
    var value = 'no'; 
    $modal.modal('hide'); 
    dfd.resolve(value); // instead of returning the value, resolve the promise with it 
    }); 
    $modal.on('click', '[data-alertify="confirm"]', function(){ 
    var value = 'yes'; 
    $modal.modal('hide'); 
    dfd.resolve(value); 
    }); 
    $modal.on('hidden.bs.modal', function(){ 
    $(this).remove(); 
    dfd.resolve(); 
    }); 
    return dfd.promise(); // return the (unresolved) promise 
}; 

今すぐAlertify.alertがthenメソッドを公開する約束オブジェクトを返します、あなたは合格する：

最初に約束を返すようにshowModal機能を変更しますコールバック：

Alertify.alert({ 
    content: 'This is MY alert content!' 
}).then(function(ret) { 
    alert(ret); 
}); 

...それだけです。

ここに更新されたfiddleがあります。