Javascript 外部JSON和外部模板-Can'；我不能让两个人都工作_Javascript_Jquery_Json

Javascript 外部JSON和外部模板-Can'；我不能让两个人都工作

javascript jquery json

Javascript 外部JSON和外部模板-Can'；我不能让两个人都工作,javascript,jquery,json,Javascript,Jquery,Json,我刚刚开始了解handlebar.JS，我可以看出它是一个非常强大的工具我希望能够使用外部加载的模板和外部加载的JSON来保持代码的整洁，减少跨页面的重复目前，我只能让其中一个工作，我可以用本地JSON数据加载外部模板，或者用本地模板加载外部JSON文件。但是，我想两者都做我在Handlebar文档中看不到任何涉及外部JSON或外部模板的内容这是我到目前为止最接近的我的javascript <!DOCTYPE html> <html lang="en"> &

我刚刚开始了解handlebar.JS，我可以看出它是一个非常强大的工具

我希望能够使用外部加载的模板和外部加载的JSON来保持代码的整洁，减少跨页面的重复

目前，我只能让其中一个工作，我可以用本地JSON数据加载外部模板，或者用本地模板加载外部JSON文件。但是，我想两者都做

我在Handlebar文档中看不到任何涉及外部JSON或外部模板的内容

这是我到目前为止最接近的

我的javascript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Please work!</title>
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
  </head>

  <body>


    <div id="anchor">My stuff should appear here</div>

    <script>

    var jsonData;

    function user_tracker(){ 

        $.getJSON("data/JSON_test.php", function(data) {
            jsonData = JSON.stringify(data); 
        });


        $.ajax({
            url: 'data/templates/test.php', 
            cache: true,
            success: function(data) {
                source    = data;
                template  = Handlebars.compile(source);
                $('#anchor').html(template(jsonData));
            }               
        }); 


    }


    $(document).ready(function($) {
        user_tracker();
    });


    </script>
  </body>
</html>

这是我的模板文件

<div>
Hey! I've loaded!
{{#people}}
            <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
{{/people}}
</div>


嘿我上膛了！
{{{人}
-{{title}，{{place}：{{{introduction}。
{{/人}

模板加载良好，但JSON似乎没有。我在控制台中根本没有收到任何错误

我添加了JSON.stringify，因为我之前遇到了一个错误，Handlebar不喜欢将对象传递给它。

我找不到转到重复的问题，但这是JS中非常常见的问题，与异步执行的性质有关

基本上，想象你需要做午餐；你决定让你的两个孩子帮忙。所以你告诉乔伊跑去商店再买些土豆（因为你家里没有土豆了），你告诉小珍从抽屉里拿刀给你（因为她当然不会割伤自己，她已经四岁了！）。你决定珍一跑腿就开始砍柴；但是因为乔伊还没回来，你很快就砍完了。然后，你妻子抱怨土豆汤里没有真正的土豆。乔伊错过了（一顿非常平淡的）晚餐，终于回家了。如果你等两个孩子，所有这些都可以避免

你的

jsonData

是你的马铃薯，是你不需要等待的差事。您的模板是Jen's knife，您可以立即执行模板编译

有两个半的解决方案

不是很好，但很简单：只有当乔伊回来时才派珍去拿刀（反之亦然）：

真实情况：在你开始做饭之前，先数一数你所有的孩子都在场：

var ajaxDone = 0;
var jsonData, template;

function runTemplate() {
  $('#anchor').html(template(jsonData));
}

$.getJSON("data/JSON_test.php", function(data) {
    jsonData = data; 
    if (++ajaxDone == 2) runTemplate();
});

$.ajax({
    url: 'data/templates/test.php', 
    cache: true,
    success: function(data) {
        var source    = data;
        template  = Handlebars.compile(source);
        if (++ajaxDone == 2) runTemplate();
    }               
});

使用承诺，这将为你计数

$.when(
  $.getJSON("data/JSON_test.php"),
  $.ajax({
      url: 'data/templates/test.php', 
      cache: true,
  })
).then(function(responseJSON, responseTemplate) {
  // ...
});

（我不知道什么是

responseJSON

和

responseTemplate

格式，可能类似于

[data，statusText，jqXHR]

…所以，

控制台。记录它们，亲自看看土豆在哪里，刀在哪里。）


编辑：我是盲目地复制粘贴，但是的，你不能JSON.stringify
。请让我快速地将其剥离。
由于AJAX请求的异步性质，您可能会在获取数据之前尝试使用这些数据。解决方案使用的是$。如下所示：
  <script>

var jsonData;

function user_tracker(){ 

    var jsonData = getJSONData();

    var ajaxData = getAJAXData();


    $.when(ajaxData, jsonData).done(html, json){
        var template  = Handlebars.compile(html);
        $('#anchor').html(template(json);
   }





}

 function getJSONData(){
     var defObj = $.Deferred();
     $.getJSON("data/JSON_test.php", function(data) {
       defObj.resolve(JSON.parse(data)); //parse if response in JSON 
    });
    return defObj.promise();
 }

function getAJAXData(){
  var defObj = $.Deferred();
  $.ajax({
        url: 'data/templates/test.php', 
        cache: true,
        success: function(data) {
            //source    = data;
            //template  = Handlebars.compile(source);
            //$('#anchor').html(template(jsonData));
            defObj.resolve(data);
        }               
    }); 
  return defObj.promise();
}


$(document).ready(function($) {
    user_tracker();
});


</script>


var jsonData；
函数user_tracker（）{
var jsonData=getJSONData（）；
var ajaxData=getAJAXData（）；
$.when（ajaxData，jsonData）.done（html，json）{
var template=handlebar.compile（html）；
$（'#anchor'）.html（模板（json）；
}
}
函数getJSONData（）{
var defObj=$.Deferred（）；
$.getJSON（“data/JSON_test.php”），函数（data）{
resolve（JSON.parse（data））；//解析JSON中的if响应
});
返回defObj.promise（）；
}
函数getAJAXData（）{
var defObj=$.Deferred（）；
$.ajax({
url:'data/templates/test.php'，
是的，
成功：功能（数据）{
//来源=数据；
//template=handlebar.compile（源代码）；
//$（'#anchor'）.html（模板（jsonData））；
分解（数据）；
}               
}); 
返回defObj.promise（）；
}
$（文档）.ready（函数（$）{
用户跟踪器（）；
});

查看上面的整个脚本片段
尝试过这个？$（'#anchor'）.html（template（{people:jsonData}））
你应该传递对象
。因此你可以省略JSON.stringify
。如果你的响应是JSON，那么就执行JSON.parse（jsonData）
“以错误的方式将数据传递到模板”-为什么？jsonData
已经包含了people
属性。你的方式最终是{people:{people:[…]}}
，不是吗？模板应该传递一个对象
{key:value}
然后可以在模板中迭代。在模板内部，我们可以像{{key.people}}{
jsonData
是一个对象（只要错误的JSON.stringify不存在）。非常感谢Amadan！这很有效。解释得很好！
$.when(
  $.getJSON("data/JSON_test.php"),
  $.ajax({
      url: 'data/templates/test.php', 
      cache: true,
  })
).then(function(responseJSON, responseTemplate) {
  // ...
});

  <script>

var jsonData;

function user_tracker(){ 

    var jsonData = getJSONData();

    var ajaxData = getAJAXData();


    $.when(ajaxData, jsonData).done(html, json){
        var template  = Handlebars.compile(html);
        $('#anchor').html(template(json);
   }





}

 function getJSONData(){
     var defObj = $.Deferred();
     $.getJSON("data/JSON_test.php", function(data) {
       defObj.resolve(JSON.parse(data)); //parse if response in JSON 
    });
    return defObj.promise();
 }

function getAJAXData(){
  var defObj = $.Deferred();
  $.ajax({
        url: 'data/templates/test.php', 
        cache: true,
        success: function(data) {
            //source    = data;
            //template  = Handlebars.compile(source);
            //$('#anchor').html(template(jsonData));
            defObj.resolve(data);
        }               
    }); 
  return defObj.promise();
}


$(document).ready(function($) {
    user_tracker();
});


</script>