2014-02-12 6 views
2

표준 확인 대화 상자가 jq 대체되었습니다.jQuery wrapping 지연 및 약속

사용자가 확인을 클릭하면 호출 될 함수를 전달할 수 있습니다.

전달 된 함수는 ajax 호출과 같이 장기 실행 비동기 태스크를 호출 할 수 있습니다. 가끔씩 둘 다 처리하려고합니다. MyConfirmation

MyConfirmation('A Title', 'A message to the user', function() { 
    $.get('/some/bigdata/longrunning'); 
} 
).then(function() { 
    // add to dom here 
}); 

이는 다음과 같습니다 :

MyConfirmation = function (title, message, ok) { 
    var d = $.Deferred(); 
    $('<div/>') 
     .text(message) 
     .dialog({ 
        buttons: { 
       "Ok": function() { 
        if($.isFunction(ok)) { 
         ok.apply(); 
        } 
        $(this).dialog("close"); 
        d.resolve(true); 
        return true; 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
        d.resolve(false); 
        return false; 
       } 
      }, 
      close: function(event, ui) { 
       $(this).remove(); 
      }, 
      resizable: false, 
      draggable: false, 
      width: 'auto', 
      title: title, 
      modal: true 
     }); 

    return d.promise(); 
}; 

내가 이상적를 원하는

내가 도심이 솔루션을 사용

(https://stackoverflow.com/a/19374933)

는 내가 달성하고자하는 것은이 같은 것입니다 사용자가 확인을 클릭했는지 취소했는지를 나타내는 true 또는 false를 반환하는 지연과 결합합니다.

은 내가 약속에되는 .done 방법은 $ 갔지에서 반환 사용할 수 있습니다 알고 있지만 어떻게 내가

답변

1

I을 사용자가 ok를 클릭하면 호출 될 함수를 사용자가 전달하도록 허용합니다.

하지 마십시오. MyConfirmation 함수에서 해당 ok 매개 변수를 제거하고 버튼 클릭에 대한 약속 만 반환하면됩니다. 사용자는 원하는 경우 기능을 체인화 할 수 있습니다.

귀하의 호출은 오히려 다음과 같아야합니다

MyConfirmation('A Title', 'A message to the user').then(function(okPressed) { 
    if (okPressed) 
     return $.get('/some/bigdata/longrunning'); 
}).then(function(longruningResult) { 
    // add to dom here 
}); 

을 또한 reject() 누를 때 취소 버튼을 약속, 당신은 부울 okPressed 검사가 별도의 오류를 사용할 수 필요가 없습니다 수 있습니다 처리기 대신.

+1

나는 단지 내 자신의 대답을 받아 들인 것으로 표시하고 훨씬 더 우아한 해결책을 읽었습니다. 게다가 나는 이것으로부터 무언가를 배웠다. 감사. –

0

나는 당신이 반환 약속으로 아약스 호출을 사용한다고 생각 내 솔루션 작업을 할 것 :

MyConfirmation('A Title', 'A message to the user', function() { 
    return $.get('/some/bigdata/longrunning'); 
} 
).then(function() { 
    // add to dom here 
}); 

MyConfirmation 기능 : 이것은 아약스 약속 자체

,369에서, 대화 상자가 DEFFERED 해결하기 위해 조건을 추가

MyConfirmation = function (title, message, ok) { 
    var d = $.Deferred(); 
    $('<div/>') 
     .text(message) 
     .dialog({ 
        buttons: { 
       "Ok": function() { 
        if($.isFunction(ok)) { 
         ok().then(function() { 
          d.resolve(true); 
         }); 
        } 
        $(this).dialog("close"); 
        return true; 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
        d.resolve(false); 
        return false; 
       } 
      }, 
      close: function(event, ui) { 
       $(this).remove(); 
      }, 
      resizable: false, 
      draggable: false, 
      width: 'auto', 
      title: title, 
      modal: true 
     }); 

    return d.promise(); 
}; 

면책 조항 : 테스트되지 않음 :)

0

Pandaiolo의 응답에 이어, 나는 호출 기능에서 아약스 호출을 반환해야한다고 생각했습니다. 함수 내에서 전달 될 때, 그리고 내 자신의 연쇄 화가 지연됩니다.

해당 인스턴스를 잡을 수있는 작은 비틀기는 A

MyConfirmation이된다 ($.when를 사용하여) 이연이 (How can I determine if a jQuery object is deferred? 참조) 작품 반환하지 않는 함수에 전달 될 때 :

MyConfirmation = function (title, message, ok) { 
    var d = $.Deferred(); 
    $('<div/>') 
     .text(message) 
     .dialog({ 
        buttons: { 
       "Ok": function() { 
        if($.isFunction(ok)) { 
         $.when(ok.apply()).then(function() { 
          d.resolve(true); 
         }); 
        } else { 
         d.resolve(true); 
        } 
        $(this).dialog("close"); 
        return true; 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
        d.resolve(false); 
        return false; 
       } 
      }, 
      close: function(event, ui) { 
       $(this).remove(); 
      }, 
      resizable: false, 
      draggable: false, 
      width: 'auto', 
      title: title, 
      modal: true 
     }); 

    return d.promise(); 
};