Question

我正在使用Handlebars打印出书籍列表，如果您点击书籍的标题，您将获得一个显示详细信息的新div。我可以打印出列表并单击书名以获取详细信息，但我点击的每个标题都会输出我点击的第一本书中的详细信息，而不是该书本身的详细信息。我相信这与绑定有关，但是没有找到似乎有用的语法。这是我的HTML＆amp;把手代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Library</title>
</head>
<body>
  <div class="main">  <div id="book-list-items"></div></div>
  <div id="book-details-items"></div>

  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/handlebars-v1.3.0.js"></script>
  <script src="js/main.js"></script>

  <script id="book-list-template" type="text/x-handlebars-template">
    <div class="book-list">
      <h3 class='template title'>{{title}}</h3>
    </div>
  </script>

  <script id="book-details-template" type="text/x-handlebars-template">
    <div class="book-details">
      <h3 class='template title'>{{title}}</h3>
      <h4 class='template year'>{{year}}</h4>
      <h4 class='template rating'>{{rating}}</h4>
    </div>
  </script>
</body>
</html>

这是JavaScript：

$(document).ready(function(){

  var source = $('#book-list-template').html();
  var source2 = $('#book-details-template').html();
  var template = Handlebars.compile(source);
  var template2 = Handlebars.compile(source2);

  $.ajax({
    type:'GET',
    url: 'https://....',
    data:{ api_key: '....'
    }
  }).done(
    function(data){
      populate_template(data)
    });

  var populate_template = function(data){
    data.results.forEach(function(book){
      var html = $(template(book));
      $('.main').append(html);
      html.click({book:book}, book_info)
    })
  }

  var book_info = function(event){
    id = event.data.book.id
    $.ajax({
      type:'GET',
      url: 'https://....' + id,
      data:{ api_key: '....'
      }
    }).done(function(data){
      var html2 = template2(data);
      $(document).trigger('change', event.currentTarget);
      $(document).on('change', function(e, listing){
        e.preventDefault();
        $(listing).replaceWith(html2)
      });
    });
  };
});

谁能告诉我哪里出错了？我假设它在＃book-details-template脚本中，但我仍然坚持语法。

Answer 1

我想因为文档中的“更改”监听器在第一次调用时保持活动状态，并且在以下调用它是重复的等等... 尝试消除监听器并将模板放入book-details-items：

。

$（ “＃书细节项”）的HTML（HTML2）;

把手在点击时复制ajax输出

1 个答案: