在Atom.io包中加載HTML文件

Question

我正在創建Atom.io程序包，但在為GUI加載HTML時遇到了一些麻煩。

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

<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>

我試圖將其加載到我的package-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，而不是咖啡腳本。 之后，我計划創建一個新的div對象，並將文件內容作為內部html添加到該對象中。

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

注意：我為html文件創建了一個文件夾：views。

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;
}