Question

我正在学习Handlebars JS的JS课程。但是我很难理解它们。现在我需要做以下事情：

使用把手的图像拼贴画，当我点击1张图片时，我打开了一张带有我点击的图片的模态。

我已经完成了拼贴画的工作，但模态部分确实令人沮丧。

这是数据结构

 var context = {
  class : [
    {
      type : "Reptiles",
      animals : [
        {
          image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Coast_Garter_Snake.jpg/500px-Coast_Garter_Snake.jpg",
          image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Nerodia_sipedon_shedding.JPG/440px-Nerodia_sipedon_shedding.JPG",
          name : "Snake",
          description : "Snakes are elongated, ....."
        },
        {
          image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Crocodilia_collage.jpg/600px-Crocodilia_collage.jpg",
          image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Caiman_crocodilus_Tropicario_2.JPG/440px-Caiman_crocodilus_Tropicario_2.JPG",
          name : "Crocodilia",
          description : "The Crocodilia ..."
        },
        {
          image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/500px-Bartagame_fcm.jpg",
          image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Lizard_in_Yemen.JPG/440px-Lizard_in_Yemen.JPG",
          name : "Lizard",
          description : "Lizards are a ...."
        },
        {
          image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Chelonia_mydas_is_going_for_the_air.jpg/440px-Chelonia_mydas_is_going_for_the_air.jpg",
          image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Turtle3m.JPG/500px-Turtle3m.JPG",
          name : "Turtle",
          description : "Turtles are reptiles ......"
        },
      ]

这是我的拼贴的模板

<script id="collage" type="text/x-handlebars-template">
        <div class="row">
          {{#each class}}
          <div class="col-md-3 col-sm-4">
            {{#each animals}}
            <img src="{{image1}}" class="collage2 thumbnail1 hidden-xs" data-id="{{@index}}">
            <img src="{{image2}}" class="collage2 thumbnail2 hidden-xs" data-id="{{@index}}">
            {{/each}}
          </div>
          {{/each}}
        </div>
</script>

这是我的模态

的脚本模板

<script id="modal-container" type="text/x-handlebars-template">
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="imageModal">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">{{name}}</h4>
            </div>
            <div class="modal-body">
                <img src="{{image1}}"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
</script>

最后这是我的模态JS

$('.thumbnail1').click(function(event){
  var imageNumber = $(this).data("id");
  var theTemplateScript = $('#modal-container').html();
  var theTemplate = Handlebars.compile(theTemplateScript);
  var theCompiledHtml = theTemplate(context.animals.image1[imageNumber]);
  $('#modal-container').html(theCompiledHtml);
  $("#myModal").modal('show');
});

我哪里出错了？

Answer 1

您正在错误地导航对象层次结构

location.search.substr(1).split('&').forEach(function (entry) {
  var value = entry.split('=');
  document.querySelectorAll('[name=' + value[0] + ']')[0].value = value[1];
});

您还需要父索引

$('.thumbnail1').click(function (event) {
     var imageNumber = $(this).data("id");
     var parent = $(this).data("parent");
     var theCompiledHtml = theTemplate(context.class[parent].animals[imageNumber]);
     $('#myModal').html(theCompiledHtml);
     $("#myModal").modal('show');
 });

http://jsfiddle.net/s4casjta/1/

无法在HandlebarsJs中使用模态

1 个答案: