Handlebars onclick view more 不显示我的 json 文件中的数据答案

【问题标题】：Handlebars onclick view more not displaying the data from my json fileHandlebars onclick view more 不显示我的 json 文件中的数据
【发布时间】：2017-06-30 13:41:53
【问题描述】：

我成功地创建了一个帮助器和函数，它使用把手在样式列表中显示来自 json 文件的数据。但是我正在努力查看我的代码的更多部分。基本上我想要实现的是，如果用户单击列表item，handlebars 应该获取该项目的 id 并将其显示在不同的页面上。我的控制台正确显示在新页面（查看详细页面）上单击的每个项目的正确 id，但该页面仅显示样式但没有来自我的内容json.这是我的车把代码：

function getParameterByName(name,url){ 
    'use strict';
    if(!url)url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]"+name+"(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if(!results)return null;
    if(!results[2])return '';
    return decodeURIComponent(results[2].replace(/\+/g,""));

}
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'jj.json');
ourRequest.onload = function () {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
    var data = JSON.parse(ourRequest.responseText);
    createHTML(data);
  } else {
    console.log("You are connected to the server, but it returned an error.");
  }

};

ourRequest.onerror = function() {
console.log("Connection error");
};

ourRequest.send();



function createHTML(myData) {
      var rawTemplate = document.getElementById("myTemplate").innerHTML; 
      var compiledTemplate = Handlebars.compile(rawTemplate);
         var myContainer = document.getElementById("this-container");
         var ourGeneratedHTML = compiledTemplate(myData); 
                     myContainer.innerHTML = ourGeneratedHTML;
            var characterId = getParameterByName("id");

        console.log(characterId);



          $.ajax("jj.json").done(function(cast){

              if ($("body").hasClass("viewdetail")){

                ///i cant seem to figure out how to render it here 
              var ourGeneratedHTML = compiledTemplate(myData); 
                      myContainer.innerHTML = ourGeneratedHTML;


              } else

                   var ourGeneratedHTML = compiledTemplate(myData); 
                      myContainer.innerHTML = ourGeneratedHTML;
                  {

                  }
                });
    }

而我的 html 如下：(viewdetails 页面)

    <body class="viewdetail"
    <div class="page-wrap">
  <div id="this-container"></div>
</div>
<script id="myTemplate" type="text/x-handlebars-template">
<span class="username"><a href="#">{{cname}}</a></span>
</script>

我尝试过使用 {{#each}} 和 {{#each myjsonobject}} 但我一直在详细信息页面上获得正确的 ID，但样式中没有数据。我在这里做错了什么，请帮忙:( 我的详细信息页面正在从我的索引页面中引用如下：

<a href="detailpage.php?id={{id}}" class="btn btn-primary btn-xs view-detail"><b>View</b></a>

这是我的 json 数据的一部分：

{"content":[{"id":"60","cname":"Admin","crep":"wew","sub_type":"memember ","token":"887618243","reference":"#5754","company_email":"rereee@gmail.com","company_phone":"234556566","service1":"erty","service2":"vbnmj","service3":"yjyt","service4":"uikjyj","company_website":"www.memeber.com","company_address":null,"company_location":"namibia","company_shortbio":"sasasa","company_longbio":"bvbvbvbvb","logos":"891319.png","logopath":"","imageA":"309129.png","imageB":"898798.jpg","imageC":"452926.jpg","imageD":"326704.jpg","company_facebook":null,"company_twitter":null,"company_linkedin":null,"company_stumbleupon":null,"company_pinterest":null,"company_googleplus":null,"user_backgroundpicture":null,"created_on":"2017-01-20 15:37:02","company_skype":null,"company_youtube":null,"company_vimeo":null,"headerimg":"993621.png","join_date":"2017-01-20 15:37:02.069147":""}

【问题讨论】：

对象myData 是什么样的？
console.log(myData);在控制台上显示我的 json 文件中的对象数组
所以我修复了这个问题，控制台上的 myData 对象显示了我的 json 文件中的对象数组，当我在控制台记录 characterId 时，我得到每个视图的正确 id。但仍然没有数据，只是在查看详细信息页面上设置样式

标签： javascript handlebars.js

【解决方案1】：

好的，经过大量研究，我发现了这一点：

在我的 html 中使用 {{#with}} 实际上从包含数据和样式的对象数组中生成了一项。现在下一步是弄清楚如何在把手 js 代码中实现它。但这就是到目前为止，我做到了，而且效果很好：

{{#with content.[0]}}

0 是数组中项目的 id。它可以是任何数字，具体取决于您要解析的项目。

【讨论】：

【解决方案2】：

对于这些类型的问题，找出问题发生的位置很重要。首先，我会尝试确定问题出在模板中还是在传递给模板的数据中。

为了检测到这一点，我会将console.log(myData); 放在您将数据传递给compiledTemplate() 调用的位置之前。如果数据看起来符合您的预期，那么您会考虑您的模板发生了什么。

首先，了解车把模板如何使用数据很重要。例如，如果我传递一个像这样的对象：

myData = { a: 4, b: 3 };

对于我的模板，我希望在我的模板中使用像 {{a}} 和 {{b}} 这样的结构。

但是，如果我传递了这样的内容：

myData = { content: [{ id: 1, cname: 'Hi'}, { id: 2, cname: 'There' }] };

那么我希望我可以访问content。如果我想获取数组中的数据，那么我需要执行以下操作：

{{#each content}}
  Name: {{cname}}
{{/each}}

现在，假设您只想要数组中的特定项目。然后您应该使用 javascript 来隔离该项目并仅将该项目传递给您的模板。使用前面的示例，并假设 myId 是您要通过模板呈现的 id：

var item myData.content.find(function(item) {
  return (item.id === myId);
});
var ourGeneratedHTML = compiledTemplate(item);

现在在您的模板中，您可以只使用 {{id}} 和 {{cname}}，例如，构建您的 html。不需要#each，因为没有数组，只有一个对象。

如果你的对象中的属性是lodges，那么在上面的代码sn-p中将content换成lodges。

【讨论】：

{{#each content}} 名称：{{cname}} {{/each}} 返回数组中的每一项。我的目标是根据每个 id 只返回一项跨度>
console.log(myData);返回 Object { lodges: Array[38] }...并且对象数组在控制台上显示数组中的所有项目
好的，更新答案给你一个方法。如果对象具有“旅馆”的属性（在它是“内容”之前）......不确定为什么它会不断变化。

【解决方案3】：

看起来您的问题是您将 JSON 中包含的完整数据集传递到模板中，而不仅仅是要显示的单个记录。您只需在字符数组中找到字符对象并将其用作模板方法的参数。

var characterId = getParameterByName("id");    
var characters = myData.content;
var character = characters.find(function (_character) {
    return _character.id === characterId;
});
var ourGeneratedHTML = compiledTemplate(character);

myContainer.innerHTML = ourGeneratedHTML;

【讨论】：

这对我不起作用...尝试使用我提供的 json 文件
@AngelaDutchan 什么不适合你？你得到character 的值了吗？
字符没有值。控制台返回一个id和控制台日志mydata上的数组，但是页面无法呈现特定id中包含的内容
基本上使用 {{each}} 在 viewdetail 页面上正确显示我的内容，但问题是，{{each}} 显示数组中的所有内容。删除 {{each}} 什么也不显示.有什么方法可以在我的 viewdetail 页面上使用 {{each}}？
你不应该使用{{#each}}。由于您想显示一条记录，因此您应该将该记录从数组中取出并将其传递给您的模板，正如我的回答所示。