自定义JS使用jQuery.Deferred确认模态并根据按钮发出返回值
我是一个最近进入Javascript世界的java开发人员,所以如果我犯了一些愚蠢的错误或假设,请原谅我。 我试图将我们的原生浏览器/ js“确认”对话框转换为主要使用骨干框架开发的自定义模式。 目前,这些模态不支持“确认”类型function。 我认为主要问题是我的模态当前不是异步工作的。
我有一个方法,我打电话打开一个模态,我希望从通话中收到一个“真”或“假”值,这取决于用户点击的按钮。 但是,目前我的方法会在显示模态后立即返回,并且不会等待按钮单击。 模态系统支持每个按钮的单独回调,可以在调用“openPortletModal”方法时定义,如下所示。 但是,“confirmDiscard”方法返回一个未定义的值,而不会等待任何按钮调用。 我的问题是,是否可以暂停执行方法直到进行回调?
在研究的过程中,我确实发现了一些关于jQuery.Deferred的内容,但是我还没有找到一种明确的方法来利用它来获得我想要的function,而且我看到的任何示例都没有包含基于回调的不同返回值。
这是我的示例代码:
confirmDiscard: function(context) { var deferred = new $.Deferred(); MyModal.openPortletModal(context, null, { views: [{ name: "auth", title: "Confirmation", renderResponseData: "This is a test", //Message that modal renders buttons: [{ type: "FINISH", label: "OK", click: function() { console.log("CLICKED OK"); deferred.resolve("true"); //this is ultimately what I'd like to return from the confirmDialog() method return false; //Modal system expects a "false" value from callback if there is no AJAX call to be made. }, }, { type: "CANCEL", click: function() { console.log("CLICKED CANCEL"); deferred.resolve("false"); return false; }, }] }] }); deferred.done(function(value) { alert(value); //This does get called on button click, but by now the confirmDiscard method has already returned. return value; }) return deferred.promise(); },
鉴于这种模式,是否有一种方法在javascript中让这个方法等待模态响应?
我建议你像你一样,但有点不同。 我希望它可以帮到你。
cutomConfirm: function(text) { var d, rendered, template, _this = this; template = $('#custom_confirm_temp'); rendered = $.tmpl($(template).template(), { text: text || '' }); $.blockUI({ message: rendered, showOverlay: true, onUnblock: function() { return $(document).unbind('click'); }, css: { width: '600px', height: '150px', opacity: '1', border: '0', backgroundColor: 'none' } }); d = $.Deferred(); rendered.find('#OK').click(function() { $.unblockUI(); return d.resolve(); }); rendered.find('#CANCEL').click(function() { $.unblockUI(); return d.reject(); }); return d; }
您需要创建模板(id =“custom_confirm_temp”)并在需要时调用。