Как я могу использовать один шаблон в handlebars. js, используя несколько объектов внутри? - PullRequest
Новая
       131

Как я могу использовать один шаблон в handlebars. js, используя несколько объектов внутри?

1 голос
/ 02 августа 2020

Я новичок в рулях. js. Я пытаюсь использовать один шаблон для создания нескольких HTML элементов, используя несколько объектов.

Это код, который у меня есть:

HTML структура: 

  <div id="homeList" style="text-align: center;">
    
  </div>


      
<script id="bar-item" type="text/x-handlebars-template"> 

{{#each this}}

{{#product}}

    <div class="homeItem">
          <article class="card" style="width: 18rem;">
            <img class="card-img-top" src={{thumbImg}}>
            <div class="card-body">
              <h5 class="card-title">{{name}}</h5>
              <p class="card-text">{{description}}</p>
                <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">More Info</button>
            </div>
          </article>
        
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">{{title}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                  <div class="modal-description">{{modalDesc}}</div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
    </div>
    {{/product}}
{{/each}}
</script>

JavaScript

<script>
    var template = document.getElementById('bar-item').innerHTML;
    var templateScript = Handlebars.compile(template);
    var context = [{
        product: [{name: "ROG Strix G731GU", 
                     description: "Hello there 01",
                    thumbImg: "https://i.ibb.co/WPtzVv8/ROG.png",
                  modalDesc: "Description1"},

                   {name: "Dell G5",
                   description: "Hello there 02",
                    thumbImg: "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6407/6407991_rd.jpg",
                   modalDesc: "Description2"}]
    }];
    var html = templateScript(context);
    document.getElementById("homeList").innerHTML = html;
</script>

Проблема в том, что при доступе к modalDesc он показывает "Description1" в обоих модальных окнах. Однако все остальные выражения верны. Кто-нибудь знает, что я могу сделать, чтобы это исправить? Я попытался изменить структуру данных, но это все равно не работает.

Ответы [ 2 ]

0 голосов
/ 02 августа 2020

Ошибка возникла из-за того, что все модальные окна имели одинаковый идентификатор. Чтобы решить эту проблему, я добавил -{{@index}} в конец идентификатора, чтобы создать модальное окно. Это получит индекс в текущем l oop и добавит его к id.

Пример: 

id = "exampleId-{{@index}}"

В приведенном выше коде идентификатор будет примерно таким: 

id = "exampleId-0"

Или что-то подобное в зависимости от индекса.

0 голосов
/ 02 августа 2020

Для ваших модулей вы должны использовать {{#each}}. Сделайте что-то вроде этого: 

 {{#each modalDesc}}
  <div class="modal-body">
   <div class="modal-description">{{this.modalDesc}}</div>
   </div>
 {{/each}}

Это похоже на javascript forEach. Он использует ручки {{each}} и будет генерировать html для каждого имеющегося у вас модального c.

...