Handlebars example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js"></script>

<div id="notification-list"></div>
<!-- Template -->
<script id="notification-list-template" type="text/x-handlebars-template">
  <div id="notification-list">
    {{#each notifications}}
    <div class="notification-item">
      <div class="header">
        <span class="user-name">{{user}}</span> - <span class="category">{{category}}</span>
      </div>
      <div class="body">
        {{content}}
      </div>
    </div>
    {{/each}}
  </div>
</script>

SCSS

.notification-item {
  border: 1px solid black;
  width: 300px;
  overflow: hidden;
  margin-bottom: 2px;
  background-color: #fff;
  .header {
    .user-name,
    .category {
      font-size: 12px;
    }
  }
  .body { 
    font-size: 12px;
  }
}

JavaScript

var source = document.getElementById('notification-list-template').innerHTML
var template = Handlebars.compile(source)

var data = []
var maxItems = 20
var i = 0;

// 가짜 데이터 추가
while (i++ < maxItems) {
  var item = {
    user: faker.name.findName(),
    category: faker.commerce.department(),
    content: faker.lorem.sentence()
  }
  data.push(item)
}
var html = template({
  notifications: data
})
document.getElementById('notification-list').innerHTML = html