在Atom.io包中加載HTML文件

Question

我正在創建一個Atom.io包，但我在爲我的GUI加載HTML時遇到了一些問題。

我所做的是創建一個新的HTML文件包含的基本GUI：

<atom-panel class='modal'> 
    <h2>Please select file.</h2> 
    <div name='open-file-list' class='select-list'> 
     <ol /> 
    </div> 

    <br /> 
    <div class='block'> 
     <button name='cancelButton' class='inline-block'>Cancel</button> 
     <button name='okButton' class='inline-block'>Ok</button> 
     <button name='openFileButton' class='inline-block'>File not listed</button> 
    </div> 

</atom-panel> 

而且我想這個裝入我的包view.js，但所有我得到的是一個空文件。我的代碼如下：

constructor(serializedState) 
    {  
     // Create root element 
     this.element = document.createElement('div'); 
     this.element.classList.add('srt-helper'); 

     let fileReader = new FileReader(); 
     fileReader.onload = function(e) 
     { 
      console.log('File loaded...') 
      let result = fileReader.result; 
      console.log(result); 
     } 
     let f = new File([''], '../views/file-select-panel.html'); 
     fileReader.readAsText(f); 
    } 

請注意，我使用JavaScript而不是coffe腳本。之後，我計劃創建一個新的div對象，並將我的文件的內容作爲內部html添加到它。

這是最好的方法嗎？如果是這樣，我做錯了什麼？

注意：我爲名爲views的html文件創建了一個文件夾。

Answer 1

我已經解決了用下面的代碼的問題：

/* 
* Load a file using XMLHttpRequest. 
* Returns a promise that can be used for the loading. 
*/ 
getFileLoadPromise(fileUrl) 
{ 
    let promise = new Promise((resolve, reject) => 
    { 
     let request = new XMLHttpRequest(); 
     request.open('GET', fileUrl); 

     request.onload =() => 
     { 
      if (request.status === 200) 
       resolve(request.responseText); 

      else 
       reject(Error(request.statusText)); 
     }; 

     request.onError =() => 
     { 
      reject(Error('Network error.')) 
     }; 

     request.send(); 
    }); 

    return promise; 
}