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="textbox" kit:bind="value" placeholder="Enter something here!" />
  <kit-button kit-e="enter">Click</kit-button>
  <p kit:observe="value"></p>
</main>

JavaScript

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

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