kaf.js sample 00

by mtsgi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mtsgi/[email protected]/d/kitstrap.css">
<main id="kaf">
  <div class="kit-right">
    <a class="kit-hl" kit:assign="__locale 'en'">English</a>
    <a class="kit-hl" kit:assign="__locale 'ja'">日本語</a>
  </div>
  <h2 kit-i>{{ title }}</h2>
  <p kit-i>{{ desc }}</p>
  <input type="text" class="kit-textbox" kit:bind="value" placeholder="Try typing ’hello’ here!" />
  <pre kit:observe="value"></pre>
  <kit-button kit:if="value == 'hello'" kit-e="enter">Hello, click me!</kit-button>
</main>

CSS

.kit-textbox {
  display: block;
  width: calc(100% - 8px);
  margin: 0 4px;
}
kit-button {
  margin-top: 12px;
}

JavaScript

import Kaf from 'https://mtsgi.github.io/kafjs/kaf.js';

const kaf = new Kaf({
  elem: '#kaf',
  locale: 'en',
  data: {
    cnt: 0
  },
  events: {
    enter() {
      this.cnt += 1;
      alert(`You clicked a button ${this.cnt} times!`);
    }
  },
  dictionary: {
    en: {
      title: 'Welcome',
      desc: 'This is sample of kaf.js!'
    },
    ja: {
      title: 'ようこそ',
      desc: 'これはkaf.jsの利用例です！'
    }
  }
});