Question

应用程序的UI是一个4x3网格。网格中的每个图块都由外部手柄模板弹出。

序列是这样的 -

创建所需数据的JSON对象。 数据= {___：＆＃34;＆＃34;，___：＆＃34;＆＃34;，___：＆＃34;＆＃34; ...};
将这些对象推送到名为 dataArray = [{}，{}，{}，{} ...]的数组中;
将此arrya传递给一个函数，该函数呈现模板 createGrid（dataArray，callback）;

模板中的序列函数createGrid（）

使用 forEach（（val）=＆gt; {}）
将val传递给AJAX调用以使用promises

数据被加载并且模板被渲染但问题是有时候填充的tile的顺序不正确。平铺一个出现在最后一行或平铺3开始与平铺4等。

我希望根据dataArray中内容的顺序填充数据，但它不会发生。

在我使用async之前：false AJAX调用生成模板并且它有效。我知道这是被剥夺了，并没有采用这种模式。

[问题2] 另一个问题是，我在模板中附加一些图像和声音，我正在使用另一个AJAX调用来验证文件是否存在，并在对象中附加文件路径正在dataArray中推送。我不知道在对象创建过程中如何调用pathValidate函数。如果我使用同步AJAX调用，那么我可以返回值但是使用同步调用，我丢失了

现在代码 -

// file path validation method 
   let validatePath = (folder, index, extension) => { // file path validation method 
    let url = folder + index + extension;
    return new Promise((resolve, reject) => {
        let xhttp = new XMLHttpRequest();
        xhttp.open('GET', url, true);
        xhttp.onload = () => {
            if (xhttp.status == 200) resolve(url);
            else {
                if (index != 11) resolve('img/' + "default" + extension);
                else resolve('img/' + "11" + extension);
            }
        };
        xhttp.onerror = () => {
            reject(xhttp.statusText);
        };
        xhttp.send();
    });
}

let getTemplateAjax = (url, cardData) => {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            type: 'GET'
        }).done((data) => {
            let template = Handlebars.compile(data),
                finalContent = template(cardData);
            resolve(finalContent);
        }).fail((err) => {
            console.log(err + "can't find template");
            reject(err);
        });
    });
}



   let createTiles = (target, dataArray, callback) => {
    dataArray.forEach((val, index) => {
        getTemplateAjax('templates/card.hbs', val).then((data) => {
            let tile = $('<div>', {
                id: "tile_" + index,
                class: "tiles-sub-grid-item"
            }).css({
                'grid-column': (index % 4) / (index / 3),
                'grid-row': (index % 3) / (index / 4),
                'border-radius': '3px',
                'cursor': 'pointer',
                'background': 'rgba(0, 0, 0, 0.8)',
                'box-shadow': '0px 0px 10px rgba(0,0,0,0.5)'
            });
            tile.append(data);
            tile.appendTo(target);
            if (callback) callback(tile);
        }).catch(() => {
            console.log('sorry no template');
        });
    });
}

将这些功能调用为渲染主菜单

  let contentArray = [],
        imagePromises = [],
        audioPromises = [];

    for (let i = 0; i < 12; i++) {
        imagePromises.push(validatePath("img/com/", i, ".svg "));
    }

    Promise.all(imagePromises)
        .then((dataArray) => {
            dataArray.forEach((val, index) => {
                contentArray.push({
                    index: index + 1,
                    title: title[index],
                    description: description[index],
                    image: val,
                    audio: " ",
                    status: "",
                    url: ""
                });
            });

            createTiles("#main-content", contentArray).then((data) => {
                console.log(data);
                data.on('click', () => {
                    let tileId = $(data).find('.card-index').text();
                    let tileTitle = $(data).find('.card-title').text();
                    if ((parseInt(tileId) - 1) == 2) {
                        bodyParts();
                    } else if ((parseInt(tileId) - 1) == 11) {
                        alexaCommands();
                    } else { 
                        let message = $(data).find('.card-description').text();
                        responsiveVoice.speak(message);
                    }
                });
            });
        })
        .catch((e) => {
            // handle errors here
            console.log(e);
        });

车把模板不会在网格

0 个答案: