Question

根据一些逻辑，我有一个输入文件，样式为“display：none”，还有一个触发输入文件元素的按钮。一切正常，直到我必须在对话框内打开一个对话框，如果用户选择OK，我打开输入文件对话框，但它不起作用。 ¿如果用户已经在对话框中选择了答案，我该如何实现呢？

<input type="file" style="display:none" class="file-input" id="files" 
ref="fileInput" change.trigger="processFile()"/>

<button type="submit" id="uploadButton" class="btn btn-default" 
click.delegate="openFileInput()" > Submit Selected </button>

 openFileInput()
 {
        if(somelogic){
            $("#files").click(); //here works cool
        }else
        {

            this.dialogService.open( {viewModel: Prompt, model: 'you  have alredy pickup a file, do you want t overrride it?',lock:false }).whenClosed(response => {                   
                 if (!response.wasCancelled) {   
                    $("#files").click();    //this not,             
                    setTimeout(() => {                       
                        $("#files").click();    //also if we wait, 3 seconds afther the dialog is closed.                    
                    },3000);
                    return;
                 } else {
                    console.log('cancelled');                    
                    return;
                 }
                 console.log('output ');                    
                 console.log(response.output);
              });
        }                  
 }

Answer 1

我不完全明白问题是什么，但是当调用.whenClosed的回调时，对话框已经分离（从DOM中删除）并且未绑定。如果标记在对话框中，则必须在对话框VM中实现逻辑。

Answer 2

您可以尝试将$("#files")元素存储为变量，然后再调用其上的任何函数。

const filesInput = $("#files")

然后执行以下操作：

 openFileInput()
 {
        const filesInput = $("#files");
        if(somelogic){
            filesInput.click();
        }else
        {

            this.dialogService.open( {viewModel: Prompt, model: 'you  have alredy pickup a file, do you want t overrride it?',lock:false }).whenClosed(response => {                   
                 if (!response.wasCancelled) {   
                    filesInput.click();             
                    setTimeout(() => {                       
                        filesInput.click();
                    },3000);
                    return;
                 } else {
                    console.log('cancelled');                    
                    return;
                 }
                 console.log('output ');                    
                 console.log(response.output);
              });
        }                  
 }

编辑：我还建议使用Aurelia绑定而不是JQuery。如果将ref="files"添加到HTML元素，然后将字段public files: HTMLElement添加到viewmodel，则可以在不使用JQuery的情况下引用方法中的元素。

编辑2 ：如果这对您不起作用，请尝试使用以下代码隐藏元素，而不是display: none：

height: 0;
overflow: hidden;
visibility: hidden;
width: 0;

在Aurelia Dialog内部响应中，jquery无效。

2 个答案: