无法在JQuery中为ID请求动态使用id元素

Question

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

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

这是代码-请帮助！

<!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>

Answer 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反之亦然

无法在JQuery中为ID请求动态使用id元素

问题描述

1 个解决方案

解决方案1
0 2014-11-30 03:34:47

问题

解决方案（ JSFiddle ）

无法在JQuery中为ID请求动态使用id元素

问题描述

1 个解决方案

解决方案1 0 2014-11-30 03:34:47

问题

解决方案（ JSFiddle ）

解决方案1
0 2014-11-30 03:34:47