Шаблон Handlebars вкладывает компоненты начальной загрузки в компоненты начальной загрузки на итерации #each - PullRequest
Новая
       15

Шаблон Handlebars вкладывает компоненты начальной загрузки в компоненты начальной загрузки на итерации #each

0 голосов
/ 12 апреля 2019

Я хочу построить список списков. Мой желаемый результат:

Презентация

презентационный документ1 ссылка1

презентационный документ2 ссылка2

Встреча

заметки о собрании document1 link1

заметки о собрании document2 link2

Шаблон: 

<script id="doc-template" type="text/x-handlebars-template">
  {{#each docs}}
    <h5>{{headerName}}</h5>
    <div class="container document-list">
      {{#each docBody}}
        <div class="row document-row">
          <div class="col-md-2 col-sm-6  order-md-1 order-sm-2 doc-item doc-type">{{docType}}</div>
          <div class="col-md-8 col-sm-12 order-md-2 order-sm-1 doc-item doc-name">{{docName}}</div>
          <div class="col-md-2 col-sm-6  order-md-3 order-sm-3 doc-item doc-download"><a href="{{{docLink}}}" target="_blank">View</a></div>
      {{/each}}  
    </div>
  {{/each}}      
</script>

JS / Jquery: 

var source = $("#doc-template").html(); 
var template = Handlebars.compile(source); 

var data = {
  docs: [ {
    headerName: "Presentations",  
    docBody: [
      {
        docName: "document 1",
        docType: "presentation",
        docLink: "link1"
      },
      {
        docName: "document 2",
        docType: "presentation",
        docLink: "link2"
      }
    ]
  },
  {
    headerName: "Meetings",  
    docBody: [ {
      docName: "meeting 1",
      docType: "meeting",
      docLink: "link1"
    },
    {
      docName: "meeting 1",
      docType: "meeting",
      docLink: "link2"
    }
  ]
  }]      
}; 


$('#document-template').append(template(data));

У меня нет проблемы, если я не использую классы начальной загрузки. Интересно, есть ли проблема с тем, как я использую помощник #each, так как часть Meetings вкладывается в элемент контейнера document-list.

Есть идеи?

Edit:

Я решил эту проблему, я чувствую себя немного глупо. Я не закрывал свой div после вложенного #each

<script id="doc-template" type="text/x-handlebars-template">
  {{#each docs}}
    <h5>{{headerName}}</h5>
    <div class="container document-list">
      {{#each docBody}}
        <div class="row document-row">
          <div class="col-md-2 col-sm-6  order-md-1 order-sm-2 doc-item doc-type">{{docType}}</div>
          <div class="col-md-8 col-sm-12 order-md-2 order-sm-1 doc-item doc-name">{{docName}}</div>
          <div class="col-md-2 col-sm-6  order-md-3 order-sm-3 doc-item doc-download"><a href="{{{docLink}}}" target="_blank">View</a></div>
</div> goes here edit
      {{/each}}  
    </div>
  {{/each}}      
</script>
...