js-data-binding/index.html at master · Izzi97/js-data-binding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Data Binding</title>
  <script src="/data-bind.js" type="module"></script>
  <style>
    html, body {
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1em;
    }

    h2 {
      text-align: center;
    }
  </style>
</head>
<body>

  <h2>Input</h2>
  <div>
    <input id="input" type="text">
    <button id="confirm">Confirm</button>
  </div>

  <div>
    <h2>Output</h2>
    <textarea id="output-1" cols="30" rows="10" readonly></textarea>
    <textarea id="output-2" cols="30" rows="10" readonly></textarea>
  </div>

  <h2>Log</h2>
  <button id="log">Log History</button>
  <textarea id="history" cols="30" rows="10" readonly></textarea>

  <script type="module">
    import { Model } from './data-bind.js'

    const model = new Model('message-model')

    const input = document.getElementById('input')
    const confirmButton = document.getElementById('confirm')
    const output1 = document.getElementById('output-1')
    const output2 = document.getElementById('output-2')
    const histLog = document.getElementById('history')
    const logButton = document.getElementById('log')

    model.bind('message', output1, 'value')
    model.bind('message', output2, 'value')
    confirmButton.onclick = _ => model.message = input.value
    logButton.onclick = logHistory

    function logHistory() {
      Object
        .entries(model.history)
        .forEach(([prop, hist]) => {
          histLog.value += `${prop}: [${hist.join(', ')}]\n`
        })
    }
  </script>
</body>
</html>