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）单独预加载文件，例如创造关键＆＃34;身体＆＃34;对于json中的每个条目，然后将其值设置为文件的内容。

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

希望它有所帮助。

Answer 2

我唯一的出路是将整个应用程序改为角度而不是使用过滤器来确保我得到正确的结果。

加载asynch的Html模板（JQuery / JavaScript asynch）

2 个答案: