Question

我正在尝试创建一个Github搜索客户端，该客户端显示左栏中包含特定关键字的存储库。然后，用户可以单击每个存储库中的各种链接，以在右侧列中获取更多详细信息（尽管仍然在左侧列中工作）。

我认为这个问题可能与我的$ .get函数有关。

＆＃13;

/* index.js */
function searchRepositories() {
  var searchTerms = $('#searchTerms').val();
  var url = `https://api.github.com/search/repositories?q=${searchTerms}`;
  $.get(url, function(data) {
    displayRepositories()
  }).fail(function(error) {
    displayError()
  })
}



function displayError() {
  $('div#errors').innerHTML = "<p>I'm sorry, there's been an error. Please try again.</p>"
}


function displayRepositories() {
  var templateFn = Handlebars.compile(document.getElementById("repositories-template").innerHTML);
  var repos = templateFn(JSON.parse(this));
  alert(repos)
  document.getElementById('results').innerHTML = repos;
  alert(document.getElementById('results').innerHTML)
}

// function searchCommits() {}

// function displayCommits() {}

$(document).ready(function (){

});

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Github Repo Search</title>

    <style>
      .flexbox-container {
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
      }
      .flexbox-container > div {
        width: 50%;
        padding: 10px;
      }
      .flexbox-container > div:first-child {
        margin-right: 20px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js" integrity="sha256-+JMHsXRyeTsws/tzbIh5YHQxRdKCuNjmvNcTFtY6DLc=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <main id="main">
      <form onsubmit="searchRepositories()">
        <input type="text" id="searchTerms" value="tetris" required>
        <input type="submit" value="Search Repositories">
      </form>
      <div id="errors"></div>
    </main>
    <div class="flexbox-container">
      <div>
        <h3>Repositories</h3>
        <div id="results">

          <script id="repositories-template" type="text/x-handlebars-template">
            <ul>
              {{#each this}}
              <li>
                <h4>Name: {{name}}</h4>
                <p>Description: {{description}}</p>
                <p><a href="{{html_url}}">View on Github<a></p>
                <p>Owner Login: {{owner.login}}</p>
                <!-- owner profile image  owner.avatar_url -->
                <p><a href="{{owner.html_url}}">View Owner's Github Profile<a></p>
                <p><a href="#" onclick="searchCommits()" data-url="{{url}}">Show Commits<a></p>
              </li>
              {{/each}}
            </ul>
          </script>

        </div>
      </div>
      <div>
        <h3>Details</h3>
        <div id="details"></div>
      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 1

即使你没有描述发生了什么错误，这里也是如此：

提交表单会使当前页面刷新，因此会重置任何显示的结果（event.preventDefault()在此处完成工作）

this

displayRepositories()不会返回API中的任何数据
{{#each this}}不包含存储库，因为它将通过“root”条目而不是其中列出存储库的items对象运行。

我将在下面添加修改后的代码，我会评论我所做的更改：

/* index.js */
function searchRepositories(event) { // include the event as parameter
  event.preventDefault(); // prevent the page from refreshing after submitting the form
  var searchTerms = $('#searchTerms').val();
  var url = `https://api.github.com/search/repositories?q=${searchTerms}`;
  $.get(url, function(data) {
    displayRepositories(data) // give the displayRepositories() the data from the API
  }).fail(function(error) {
    displayError()
  })
}



function displayError() {
  $('div#errors').innerHTML = "<p>I'm sorry, there's been an error. Please try again.</p>"
}


function displayRepositories(data) { // get the data from the API
  var templateFn = Handlebars.compile(document.getElementById("repositories-template").innerHTML);
  var repos = templateFn(data); // the data is already a JSON object, no need to parse it again
  // alert(repos)
  document.getElementById('results').innerHTML = repos;
  // alert(document.getElementById('results').innerHTML)
}

// function searchCommits() {}

// function displayCommits() {}

$(document).ready(function (){

});

<!DOCTYPE html>
<html>
  <head>
    <title>Github Repo Search</title>

    <style>
      .flexbox-container {
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
      }
      .flexbox-container > div {
        width: 50%;
        padding: 10px;
      }
      .flexbox-container > div:first-child {
        margin-right: 20px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js" integrity="sha256-+JMHsXRyeTsws/tzbIh5YHQxRdKCuNjmvNcTFtY6DLc=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <main id="main">
      <form onsubmit="searchRepositories(event)"> <!-- add the event variable to the function -->
        <input type="text" id="searchTerms" value="tetris" required>
        <input type="submit" value="Search Repositories">
      </form>
      <div id="errors"></div>
    </main>
    <div class="flexbox-container">
      <div>
        <h3>Repositories</h3>
        <div id="results">

          <script id="repositories-template" type="text/x-handlebars-template">
            <ul>
              {{#each this.items}}  <!-- this.items does include the repositories -->
              <li>
                <h4>Name: {{name}}</h4>
                <p>Description: {{description}}</p>
                <p><a href="{{html_url}}">View on Github<a></p>
                <p>Owner Login: {{owner.login}}</p>
                <!-- owner profile image  owner.avatar_url -->
                <p><a href="{{owner.html_url}}">View Owner's Github Profile<a></p>
                <p><a href="#" onclick="searchCommits()" data-url="{{url}}">Show Commits<a></p>
              </li>
              {{/each}}
            </ul>
          </script>

        </div>
      </div>
      <div>
        <h3>Details</h3>
        <div id="details"></div>
      </div>
    </div>
  </body>
</html>

Github repo搜索客户端不显示数据

1 个答案: