Question

我成功地创建了一个帮助器和函数，使用把手显示来自样式列表中的json文件的数据。但我正在努力查看我的代码的更多部分。基本上我试图实现的是，如果用户点击列表item，把手应该获取该项目的ID并将其显示在不同的页面上。我的控制台正确显示了在新页面（viewdetail页面）上单击的每个项目的正确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如下:(查看详情页面）

    <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":""}

Answer 1

看起来您的问题是您将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;

Answer 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，请在上面的代码段中为content切换lodges。

Answer 3

好的，经过广泛的研究，我发现了这个：

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

{{#with content.[0]}}

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

Handlebars onclick视图更多不显示我的json文件中的数据

3 个答案: