kaf.js sample 08

by mtsgi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mtsgi/[email protected]/d/kitstrap.css">
<script src="https://mtsgi.github.io/kafjs/kaf.js"></script>
<main id="kaf">
  <ul>
    <li class="kit-hl-alt" kit-e="add2a">Click to increment A</li>
    <li class="kit-hl-alt" kit-e="add2b, add2c mouseover">Click to increment B / Mouseover to increment C</li>
    <li class="kit-hl-alt" kit-e="add2a, add2b, add2c">Click to increment ALL</li>
  </ul>
  <kit-pane>A is <span kit:observe="a"></span></kit-pane>
  <kit-pane>B is <span kit:observe="b"></span></kit-pane>
  <kit-pane>C is <span kit:observe="c"></span></kit-pane>
</main>

JavaScript

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

const kaf = new Kaf({
  elem: '#kaf',
  data: {
    a: 0, b: 0, c: 0
  },
  events: {
    add2a() { this.a += 1 },
    add2b() { this.b += 1 },
    add2c() { this.c += 1 }
  }
});