如何在 handlebars.js 中使用一个模板，同时在其中使用多个对象？

Question

我对handlebars.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”。 但是，所有其他表达式都是正确的。 有谁知道我能做些什么来解决这个问题？ 我试过改变数据的结构，但还是不行。

Answer 1

对于您的模块，您必须使用 {{#each}}。 做这样的事情：

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

这有点像 javascript forEach。 它使用把手 {{each}} 并将为您拥有的每个 modaldesc 生成 html。

Answer 2

发生错误是因为所有模式都具有相同的 id。 为了解决这个问题，我将-{{@index}}添加到 id 的末尾，以创建模态。 这将获取当前循环中的索引，并将其添加到 id。

例子：

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

上面的代码会将 id 设置为：

id = "exampleId-0"

或类似的东西，取决于索引。