加载HTML模板的异步（JQuery / JavaScript异步）

Question

因此，我正在制作一个网页，其中包含一些从txt文件加载的代码段。 txt文件的路径和位置信息存储在json文件中。 首先我要遍历这样的json文件

[
{"root":"name of package", "html":"htmlfile.txt", "c":"c#file.txt", "bridge":"bridgefile"},
 {"root":"name of package", "html":"htmlfile.txt", "c":"c#file.txt", "bridge":"bridgefile"}
]

加载后，我正在使用index.html文件中的模板，然后插入模板。 我的问题是，它的发生是异步的，因此由于js的异步性质，页面看上去永远不会相同。 这是我用于加载和插入的jquery代码的样子：

$(document).ready(function () {
var fullJson;
$.when(

 $.get('/data/testHtml/data.json', function (json) {

    fullJson=json;

})

).then(function(){
   for(var i=0; i<fullJson.length; i++){
       templefy(fullJson[i],i);
   }
})


var templefy = function (data, number) {

    //Fetches template from doc.
    var tmpl = document.getElementById('schemeTemplate').content.cloneNode(true);
    //Destination for template inserts
    var place = document.getElementsByName('examples');

    //Set name
    tmpl.querySelector('.name').innerText = data.root;

    //Next section makes sure that each tap pane has a unique name so that the system does not override eventlisteners
    var htmlNav = tmpl.getElementById("html");
    htmlNav.id += number;

    var htmlLink = tmpl.getElementById('htmlToggle');
    htmlLink.href += number;

    var cNav = tmpl.getElementById('c');
    cNav.id += number;

    var cLink = tmpl.getElementById('cToggle');
    cLink.href += number;

    var bridgeNav = tmpl.getElementById('bridge');
    bridgeNav.id += number;

    var bridgeLink = tmpl.getElementById('bridgeToggle');
    bridgeLink.href += number;


    //Auto creates the sidebar with links using a link template from doc.
    var elementLink = tmpl.getElementById('elementLink');
    elementLink.name +=data.root;

    var linkTemplate = document.getElementById('linkTemplate').content.cloneNode(true);
    var linkPlacement = document.getElementById('linkListWVisuals');
    var link = linkTemplate.getElementById('link');
    link.href = "#"+data.root;
    link.innerText = data.root;
    linkPlacement.appendChild(linkTemplate);


    //Fetches html, c# and bridge code. Then inserts it into template and finally inserts it to doc
    $.get("/data/" + data.root + '/' + data.html, function (html) {
        tmpl.querySelector('.preview').innerHTML = html;
        tmpl.querySelector('.html-prev').innerHTML = html;


        $.get('/data/' + data.root + '/' + data.c, function (c) {
            tmpl.querySelector('.c-prev').innerHTML = c;

            $.get('/data/' + data.root + '/' + data.bridge, function (bridge) {
                console.log(bridge);
                tmpl.querySelector('.bridge-prev').innerHTML = bridge;
                place[0].appendChild(tmpl);
            })

        })
    })
}

});

所以是的，我的问题是，只要模板准备就绪，它就会在模板中触发，而不是按照json文件中编写的顺序触发。

我会尽我所能的帮助..谢谢:)

Answer 1

据我所知，没有黄金方法，我通常采用以下选项之一：

1）分别预加载文件，例如为json中的每个条目创建键“ body”，然后将其值设置为文件的内容。

2）在项目没有完全加载到DOM中之前，不要显示它们，在显示它们之前，请按照DOM在JSON数组中的位置对它们进行排序。

希望能帮助到你。

Answer 2

我唯一的出路是改为使整个应用程序成角度，并使用过滤器以确保获得正确的结果。