Question

var name;
var what;
var sol;
var i;
var biasData;
var http = new XMLHttpRequest();
http.open("GET","biases.json", true);
http.onreadystatechange = function() {
  if(http.readyState === 4) {
    if(http.status >= 200 && http.status <= 400) {
      biasData = JSON.parse(http.responseText);
      console.log(biasData);
      var data = biasData.slice(0,1);
      console.log(data);
      // var data = biasData.splice(0,1);
      // console.log(data);
      // i = 0;
      // var length = biasData.length;
      // setInterval(function() {
      //   name = biasData[i]["name"];
      //   what = biasData[i]["explanation"];
      //   sol = biasData[i]["solution"];
      //   i++;
      //   if(i >= length) {
      //     i = 0;
      //   }
      // }, 10000);
      var templateScript = document.getElementById('bias').innerHTML;
      var theTemplate = Handlebars.compile(templateScript);
      var compiledTemp = theTemplate(data);
      document.getElementById('main').innerHTML = compiledTemp;

    }
  }
};
http.send();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Learning Handlebars.js</title>
  </head>
  <body>
    <div id="main">

    </div>
    <script id="bias" type="x-handlebars-template">
        <h1 id="name">{{name}}</h1>
        <p id="what">{{explanation}}</p>
        <p id="sol">{{solution}}</p>
    </script>
    <a href="#"><button type="button" name="button">Read more at Wikipedia</button></a>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
    <script type="text/javascript" src="handle.js"></script>
  </body>
</html>

代码不会将值附加到我的页面。我也没有收到任何错误。

这是我的json数据

[{
    "name": "Survivorship Bias",
    "explanation": "It causes you to overestimate your chances of success. For example, you found a startup and think of it as the next Google, but you don't realise the fact that behind every successful startup there are way many company that don't even make it off the starting line, and out of those who take off, a lot many go bankrupt within first three years.",
    "solution": "This doesn't mean that you don't even try, but neglecting the correct odds can cause to come up with a terrible plan. A better way to deal with this is to be aware of people's failures too. Take note of the reality, and plan accordingly. "
},
{
    "name": "Swimmer's Body Illusion",
    "explanation": "Have you ever watched a commercial of a cosmetic, in which your favorite actress is endorsing that cosmetic? You think that you should buy that as it will make you look like your favorite actress. The problem is, cosmetic doesn't make your actress look the way she does. The actress is born attractive, and hence, is the chosen candidate for that advertisement.",
    "solution": "Be honest about yourself. It's not that if you got an MBA, then you'd earn all the money in the world. It's only if you have the best skills, then you'd earn all the money in the world." 
},
{
    "name": "Clustering Illusion",
    "explanation": "'Look! The cloud looks like a tortoise.' Haven't you said that before? You may have heard viral stories of people, who observed the face of one of the many Gods on a potato. It is normal. Human brain loves to seek patterns. The worst part is, if your brain can't find a obvious patter, then it will make one.",
    "solution": "Don't neglect the possibility of something happening by chance. Not everything happens for a reason, sometimes it is just our brain that is messing with us."
},
{
    "name": "Social Proof",
    "explanation": "How often do you do things just because others are doing it too? Let's understand, why we do it. Back in the days of being a cavemen, it was a good survival strategy. When we knew less about our world, it was better to run for our lives, when others were too.",
    "solution": "Don't buy something just because everybody is buying it. Look for whether or not if buying it can help you with your situation. "
}
]

我一直在关注javascript是性感的教程，还有两个youtube视频，但没有人提到这种情况。

任何帮助都会很棒。

编辑：我进一步测试，重新启动的JSON数据导致了问题。虽然，data正在登录控制台，但不知何故Handlebars功能无法读取它。

Answer 1

好。我已经找到了解决方案。如果你是处于类似情况的人。然后看看你传递给模板的数据。

在我的情况下，data是一个数组。所以我不得不使用data[0]来访问该对象。

Handlebars.js不会将值附加到我的页面

1 个答案: