在 DOJO Confirm Dialog 中动态设置 onExecute 回调函数答案

【问题标题】：Dynamically Set onExecute callback function in DOJO Confirm Dialog在 DOJO Confirm Dialog 中动态设置 onExecute 回调函数
【发布时间】：2016-02-18 09:22:27
【问题描述】：

我的 jsp 中有两个 html 按钮。一个是添加，另一个是删除。现在，如果单击任何一个按钮，则会显示一个道场确认对话框。单击对话框中的“确定”后，将执行添加或删除功能。并且此 Dojo 对话框存在于其中一个父 jsp 页面中，该页面将被其他存在添加或删除功能的 jsp 页面重用。根据添加/删除按钮单击确认消息也需要更改。前任。对于添加，消息应该是 'Do you want to Add' ，对于 Remove 消息应该是 'Do you want to Remove'。我能够在 DOJO Cinfirm Dialog 中动态设置消息，但无法设置 onExecute 回调函数，即。在对话框中单击确定时。下面是代码。

注意：我使用的是 DOJO 1.10 库

确认对话框代码：

require(["dijit/ConfirmDialog", "dojo/domReady!"], function(ConfirmDialog){
    myDialog = new ConfirmDialog({
        title: "GCLDW - Confirm Dialog",
        content: "",
        style: "width: 300px;",
        onExecute:function(){
            removeCustomer();
        }
    });
});

HTML 按钮代码：

<button type="button" id="removeCustomerButton"
        onclick="myDialog.set('content', 'Do you want to remove the selected item ?<br><br>');myDialog.show();">
                                <SPAN class=grey><EM><s:message
                                    code="customer.removeCustomer" text="" /></EM>
                                </SPAN>
</button>

<button type="button" id="addCustomerButton"
        onclick="myDialog.set('content', 'Do you want to Add the selected item ?<br><br>');myDialog.show();">
                                <SPAN class=grey><EM><s:message
                                    code="customer.addCustomer" text=""/></EM>
                                </SPAN>
</button>

现在如何根据按钮单击设置 onExecute 回调函数，它可以是 addCustomer() 或 removeCustomer() ，并且使用此对话框的任何页面都会有自己的这两种方法的实现。

【问题讨论】：

标签： javascript html dojo

【解决方案1】：

只需设置 onExecute 块 - 以相同的方式设置内容。

还有一个建议是 - 将 JS 代码与 HTML 分开。

这里是变通方法-

HTML 代码-

<button type="button" id="removeCustomerButton">
        <SPAN class=grey><EM>Remove</EM></SPAN>
</button>

<button type="button" id="addCustomerButton">
        <SPAN class=grey><EM>Add</EM></SPAN>
</button>

&道场-

    require(["dijit/ConfirmDialog", "dojo/domReady!"], 
            function(ConfirmDialog){
                var myDialog = new ConfirmDialog({
                    title: "GCLDW - Confirm Dialog",
                    content: "",
                    style: "width: 300px;"
                });

                dojo.query('#removeCustomerButton').onclick( function() {
                    myDialog.set('content', 'Do you want to remove the selected item ?<br><br>');
                    myDialog.set('onExecute', function(){removeCustomer()} );   // cant call it directly- must wrap within a function
                    myDialog.show();
                });

                dojo.query('#addCustomerButton').onclick( function() {
                    myDialog.set('content', 'Do you want to Add the selected item ?<br><br>');
                    myDialog.set('onExecute', function(){addCustomer()} );  // cant call it directly- must wrap within a function
                    myDialog.show();
                });


            });


    function removeCustomer(){
        console.log("removeCustomer called on execute");
    }

    function addCustomer(){
        console.log("addCustomer called on execute");
    }

【讨论】：

如果你需要一个 jsfiddle 链接来运行，请告诉我——上面的代码 sn-p。

【解决方案2】：

在/dojo-release-1.10.4-src/dijit/_DialogMixin.js中，cmets状态：

execute: function(/*Object*/ /*===== formContents =====*/){
// summary:
//      Callback when the user hits the submit button.
//      Override this method to handle Dialog execution.

我像这样实现了一个 ConfirmDialog：

var confirmDialog = new ConfirmDialog({
    title: core.confirm
});
confirmDialog.startup();

function confirmAction(text, callbackFn) {
    confirmDialog.set("execute", callbackFn);
    confirmDialog.set("content", text);
    confirmDialog.show();
}

并这样称呼它：

lib.confirmAction(core.areyousure, function () {
    markedForDeletion.forEach(function (node) {
        // Do deletion
    });
});

【讨论】：