在包中加载 HTML 文件 Atom.io

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>

我正在尝试将其加载到我的包视图中.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 添加到其中。

这是最好的方法吗？如果是这样，我做错了什么？

注意：我为 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;
}