Question

在单击侦听器内部，我有一个返回promise并打开弹出窗口的函数。我想从弹出窗口中传递所选值的数组。但是，只有当我第一次单击“发布”按钮时，此承诺才有效。

我做错了什么？

  
  function showtWindow(){
  
    var selected = [];
    var post = false;
    
    var dfd = new jQuery.Deferred();
    var promise = dfd.promise();
    
  	var popupWindow = $("#popupWindow").data('kendoWindow');

    //init window only first time
    if (popupWindow === undefined) {

        popupWindow = $("#popupWindow").kendoWindow({
            title: 'Test',
            width: 400,
            height: 600,
            modal: true,
            close: function () {
                //this.destroy();
                if (post) {
                    dfd.resolve(selected);
                }
            }
        }).data('kendoWindow');

        popupWindow.wrapper.find('.confirm').on('click', function (e) {
            selected = popupWindow.wrapper.find('.list input:checked').map(function (i, el) {
                return $(el).val();
            }).get();

            post = true;
            popupWindow.close();
        });

        popupWindow.wrapper.find('.cancel').on('click', function (e) {
            popupWindow.close();
        });
    }
    
    popupWindow.center().open();

    return promise;
  }
  
  
  
  $('.testButton').on('click', function(){
    var promise = showtWindow();
  	
  	promise.then(function (e1) {
        console.log(e1)
    })/*.done(function (e2) {
        console.log(e2)
    }).fail(function (e3) {
        console.log(e3)
    })*/
  })

<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
</head>
<body>
<div hidden="hidden" id="popupWindow">
    <ul class="list">
        <li>
            <label><input type="checkbox" value="1" />One</label>
        </li>
        <li>
            <label><input type="checkbox" value="2" />Two</label>
        </li>
    </ul>

    <button class="confirm">Post</button>
    <button class="cancel">Cancel</button>
</div>
  
<button class="testButton">Test</button>

</body>

Answer 1

尝试一下，这在您的KendoSandbox中为我工作；

var popupWindow, dfd;
function showtWindow(){

    var selected = [];
    var post = false;

    dfd = new jQuery.Deferred();
    var promise = dfd.promise();

    popupWindow = $("#popupWindow").data('kendoWindow');

    //init window only first time

    if (popupWindow === undefined) { // removed the if undefined clause

    popupWindow = $("#popupWindow").kendoWindow({
        title: 'Test',
        width: 400,
        height: 600,
        modal: true,
        close: function () {

            if (post) {
                dfd.resolve(selected);
            }
            // this.destroy();
        }
    }).data('kendoWindow');

    popupWindow.wrapper.find('.confirm').on('click', function (e) {
        selected = popupWindow.wrapper.find('.list input:checked').map(function (i, el) {
            return $(el).val();
        }).get();

        post = true;
        popupWindow.close();
    });

    popupWindow.wrapper.find('.cancel').on('click', function (e) {
        popupWindow.close();
    });
    } // removed the if undefined clause

    popupWindow.center().open();

    return promise;
}

希望这会有所帮助，我只是在单击按钮时覆盖弹出窗口和相关的诺言，这样每次单击按钮都可以捕获诺言（抛出）。

jQuery Deferred的JavaScript承诺仅在第一时间解决

1 个答案: