HTMLテンプレートがasynch（JQuery/JavaScript asynch）をロードしました

Question

私はtxtファイルから読み込まれたコードスニペットを使ってWebページを作成しています。パスへの情報とtxtファイルの場所はjsonファイルに保存されます。まず私は、ロードされた後、私は私のindex.htmlファイルからテンプレートを使用して、テンプレートを挿入しています。この

[ 
{"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"} 
] 

のように見えるJSONファイルをloaingよ。私の問題は、起こっているasynchが、jsの非同期性のためにページが決して同じに見えないようにすることです。

$(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ファイルに記述された順序で準備していないときはいつでも、それだけでテンプレートで発火点である： はここでロードや挿入のための私のjqueryのコードは次のようになります。

私は私はあなたをget..Thankできるものは何でも助け取るよ:)

Answer 1

私の唯一の方法は、代わりにアプリケーション全体を斜めにし、フィルタを使って正しい結果を得ることでした。

Answer 2

私の知る限りでは、そこには黄金の方法がありませんし、私は通常、次のいずれかのオプションを適用します。

1）プリロードインクルードファイルは別々にあなたのjson内の各エントリのキー "body"を作成し、その値をファイルの内容に設定します。

2）アイテムがDOMに完全にロードされていない状態で、表示する前にアイテムを表示しないでください。 json配列内の位置。

希望します。