无法在 JQuery 中为 GET 请求动态使用 id 元素答案

【问题标题】：Not able to dynamically use id element for a GET request in JQuery无法在 JQuery 中为 GET 请求动态使用 id 元素
【发布时间】：2015-01-28 07:31:17
【问题描述】：

我正在尝试使用 handlebars.js 模板化来自 themoviedb 的 GET 请求。这个想法是，第一个获取请求和模板显示数据库中的所有电影以及图片等，当单击其中一个标题时，它会在该特定电影之前添加有关该电影的更多信息。为此，我尝试将#clickable div 中的数据属性与我分配了“{{ id }}”元素的数据ID 一起使用。从那里我有一个 .onclick 事件处理程序，它将电影 ID 保存到 var Id。最后，我将 var Id 连接到第二个 get 请求以填充新模板。

我不断收到未捕获的错误您必须将字符串或 Handlebars AST 传递给 Handlebars.compile。你通过了 undefined。

这是代码——请帮忙！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>URDB!</title>
</head>
<body>
  <div class="main">hello world</div>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/handlebars-v1.3.0.js"></script>
  <script src="js/script.js"></script>
  <script id="all" type="text/x-handlebars-template">
  <div class="list">
    <div id="clickable" data-id={{ id }}><h4>{{ title }}</h4></div>
    <p>{{ release_date }}</p>
    <p>{{ vote_average }}</p>
    <h2><img src="https://image.tmdb.org/t/p/w396{{poster_path}}"></h2>
  </div>
</script>
<script id="one" type="text/x-handlebars-template">
  <div class="single">
    <h4>{{ title }}</h4>
    <p>{{ release_date }}</p>
    <p>{{ vote_average }}</p>
    <p>{{ imdb_id }}</p>
    <p>{{ tagline }}</p>
    <h2><img src="https://image.tmdb.org/t/p/w396{{poster_path}}"></h2>
  </div>
</script>
<script>
  $(document).ready(function(){
  var source = $("#All").html();
  var source2 = $("#single").html();

  var template = Handlebars.compile(source);
  var template2 = Handlebars.compile(source2);
  var myList = [];

    $.get('https://api.themoviedb.org/3/movie/now_playing?api_key=caa1990e26f7dab9052573323febcbdc', function(data){

    data.results.forEach(function(x){
      myList.push(x);
      var myNewHTML = template({
      title: x.title,
      release_date: x.release_date,
      vote_average: x.vote_average,
      poster_path: x.poster_path,
      id: x.id
      });

      $('body').append(myNewHTML);
      })
    });

   $("#clickable").on('click', function(){
    var Id = $(this).data('id');
   $.get('http://api.themoviedb.org/3/movie/'+Id+'?api_key=caa1990e26f7dab9052573323febcbdc', function(data){
        console.log(data);
        var anotherHTML = template2({
        title: data.title,
        release_date: data.release_date,
        vote_average: data.vote_average,
        poster_path: data.poster_path,
        imdb_id: data.imdb_id,
        tagline: data.tagline
        });
        $('body').prepend(anotherHTML);
    })
   })
})
</script>
</body>
</html>

【问题讨论】：

任何帮助将不胜感激？

标签： javascript jquery html css handlebars.js

【解决方案1】：

问题

您引用的 id 属性不反映您的源代码，这意味着您将 undefined 传递到 Handlebars.compile 并因此得到错误：

<script id="all" type="text/x-handlebars-template">...</script>
<script id="one" type="text/x-handlebars-template">...</script>

var source = $("#All").html();
var source2 = $("#single").html();

问题是：

#All - JavaScript 区分大小写；您的脚本标签中的 id 都是小写的
#single - 您的代码中没有 id single；你应该找one！

解决方案 (JSFiddle)

将#All 更改为#all，反之亦然
将#single 更改为#one，反之亦然

【讨论】：