javascript - 加载 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>

我试图将其加载到我的 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 而不是 coffe 脚本。之后我计划创建一个新的 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;
}