Handlebars チートシート

Handlebarsの個人的なチートシートです。

https://handlebarsjs.com/

## Helpers

```ruby:equal
Handlebars.registerHelper('equal', function (value1, value2) {
  return value1 == value2;
});
```

```ruby:math
Handlebars.registerHelper('math', function (value1, operator, value2, options) {
  value1 = parseFloat(value1);
  value2 = parseFloat(value2);

  return {
    "+": value1 + value2,
    "-": value1 - value2,
    "*": value1 * value2,
    "/": value1 / value2,
    "%": value1 % value2,
  }[operator];
});
```

```ruby:capitalize
Handlebars.registerHelper('capitalize', function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
});
```

```ruby:upperCase
Handlebars.registerHelper('upperCase', function (str) {
  return str.toUpperCase();
});
```

```ruby:createArray
Handlebars.registerHelper('createArray', function (length) {
  var arr = new Array(length);
    for (var i = 0; i < length; i++) {
      arr[i] = '';
    }
    return arr;
});
```

## Usage

### コンポーネントに値を渡し、jsonからループでhtmlを生成

```ruby:data/sort.json
{
  "category": [
    {
      "slug": "all",
      "label": "すべての記事"
    },
    {
      "slug": "news",
      "label": "ニュース"
    },
    {
      "slug": "blog",
      "label": "ブログ"
    }
  ]
}
```

```ruby:index.hbs
{{> components/list
  domain='https://hoge.com/'
}}
```

```ruby:components/list.hbs
<ul class="list">
  {{#each data.sort.category}}
  <li class="item" data-id="{{ math @index '+' 1 }}">
    <a href="{{ ../domain }}category/{{ slug }}/" class="anchor{{#if (equal @index 0)}} is-active{{/if}}">{{ label }}</a>
  </li>
  {{/each}}
</ul>
```

```ruby:output
<ul class="list">
  <li class="item" data-id="1">
    <a href="https://hoge.com/category/all/" class="anchor is-active">すべての記事</a>
  </li>
  <li class="item" data-id="2">
    <a href="https://hoge.com/category/news/" class="anchor">ニュース</a>
  </li>
  <li class="item" data-id="3">
    <a href="https://hoge.com/category/blog/" class="anchor">ブログ</a>
  </li>
</ul>
```

### 多言語

```ruby:data/lang.json
{
  "ja": {
    "title": "日本語タイトル",
    "copy": "コピー"
  },
  "en": {
    "title": "English title",
    "copy": "copy"
  }
}
```

```ruby:index.hbs
{{> components/content
  lang='ja'
}}
```

```ruby:en/index.hbs
{{> components/content
  lang='en'
}}
```

```ruby:components/content.hbs
<div class="content">
  {{#each data.lang}}
  {{#if (equal ../lang @key)}}
    <h1 class="title">{{ title }}</h1>
    <p class="copy">{{ copy }}</p>
  {{/if}}
  {{/each}}
</div>
```

```ruby:output index.html
<div class="content">
  <h1 class="title">日本語タイトル</h1>
  <p class="copy">コピー</p>
</div>
```

```ruby:output en/index.html
<div class="content">
  <h1 class="title">English title</h1>
  <p class="copy">copy</p>
</div>
```

### 数字を受け取りその数だけ配列を返す

```ruby:index.hbs
{{#each (createArray 10)}}
<div class="item" data-id="{{ math @index "+" 1 }}"></div>
{{/each}}
```

```ruby:output
<div class="item" data-id="1"></div>
<div class="item" data-id="2"></div>
<div class="item" data-id="3"></div>
<div class="item" data-id="4"></div>
<div class="item" data-id="5"></div>
<div class="item" data-id="6"></div>
<div class="item" data-id="7"></div>
<div class="item" data-id="8"></div>
<div class="item" data-id="9"></div>
<div class="item" data-id="10"></div>
```