Kendo 向 Aurelia 确认 jQuery

Posted 2023-05-07

【中文标题】Kendo 向 Aurelia 确认 jQuery

【英文标题】：Kendo confirm jQuery to Aurelia

【发布时间】：2021-10-03 12:20:04

【问题描述】：

我正在尝试重新排序 KendoUI 确认对话框上的按钮。 Telerik 支持提供了一个 jQuery 示例，但我似乎无法让 Aurelia 中的语法正确。

我有这个，它可以让我按我想要的顺序放置按钮：

        confirm(message: string, title?: any): JQueryPromise<any>         
            message = this.javascriptCommentTohtml(message);
            title = this.checkForTitle(title);
            let dialog = $('<div></div>').appendTo(document.body);
            let kConfirm: kendo.ui.Confirm;
            let options: any = 
                buttonLayout: 'normal',
                title: title,
                content: message,
                actions: [
                    
                        text: "Cancel",
                        primary: false,
                        cssClass: "k-button-cancel",
                        action: function (e) 
                            //  What goes here to trigger cancel action???
                        
                    ,
                    
                        text: "OK",
                        primary: true,
                        cssClass: "k-button-ok",
                        action: function (e) 
                            //  What goes here to trigger OK action???
                        
                    
                ],
                close: function (e) 
                    kConfirm.wrapper.remove();
                
            ;
            kConfirm = dialog.kendoConfirm(options).data('kendoConfirm');
            kConfirm.open();
            return kConfirm.result;
        

但我不知道在按钮操作中添加什么来触发默认的“确定”和“取消”操作。 Telerik 示例是这样的，但他们使用的是“secondaryButtonCloseFunction”和“primaryButtonCloseFunction”，我无法让 Aurelia 识别。

           function showConfirm(message, options) 
              if (options === undefined) 
                options = new Object();
              
              var dialog = $("#confirm-dialog");
              dialog.kendoDialog(
                closable: false,
                content: message,
                title: options.title || 'Confirm',
                width: options.width || 400,
                height: options.height || 200,
                modal: true,
                buttonLayout: "normal",
                actions: [
                  text: options.secondaryButtonText || 'Cancel',
                  action: options.secondaryButtonCloseFunction || function ()  
                    alert("No clicked")
                  
                ,
                
                  text: options.primaryButtonText || 'OK',
                  action: options.primaryButtonCloseFunction || function ()  
                    alert("Yes clicked")
                  ,
                  primary: true
                ]
              );
              dialog.data("kendoDialog").open();
            

他们的示例使用通用对象作为“选项”，我尝试声明一个单独的对象来包含那些让我通过 Aurelia 编译错误的“xxButtonCloseFunction”属性，但它没有做任何事情。

谢谢！

【参考方案1】：

Telerik 带来了一个切换按钮顺序的 CSS 解决方案。也许这对其他人有用！

.k-dialog-buttongroup .k-button:first-child 
border-top-left-radius: 0;
border-bottom-left-radius: 0;
display: flex;
justify-content: flex-end;

.k-dialog-buttongroup .k-button:last-child 
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    order: -1;