baza/cart.html at main · vitali2y/baza · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html>

<head>
  <title>Baza - Multi-Record Demo</title>
  <script src="baza.js"></script>
  <style>
    table {
      border-collapse: collapse;
      margin-top: 1rem;
      width: 100%;
    }

    td, th {
      border: 1px solid #ccc;
      padding: .5rem;
      text-align: left;
    }

    input {
      width: 95%;
    }
  </style>
</head>

<body>
  <h2>Baza - Multi-Record Demo</h2>

  <table id="recordsTable">
    <thead>
      <tr>
        <th>First</th>
        <th>Last</th>
        <th>Error</th>
        <th>Timestamp</th>
      </tr>
    </thead>
    <tbody id="recordsBody"></tbody>
  </table>

  <button id="updateAll">Update All</button>
  <button id="updateOne">Update One (Index 1)</button>

  <script>
    const initialData = [
      { firstname: "Jennifer", lastname: "Sharum", error: "unable to search by email", ts: "2025-08-11T12:12:08Z" },
      { firstname: "Donna", lastname: "Dow", error: "unable to search by ticket number", ts: "2025-08-13T12:22:32Z" },
      { firstname: "Peter", lastname: "Test", error: "report about issue", ts: "2025-08-18T13:05:12Z" }
    ];

    // Dynamically render table rows with baza-bind attributes
    function renderTableRows(data) {
      const tbody = document.getElementById('recordsBody');
      tbody.innerHTML = '';
      data.forEach((row, idx) => {
        tbody.insertAdjacentHTML('beforeend', `
          <tr data-index="${idx}">
            <td><input type="text" baza-bind="records[${idx}].firstname"></td>
            <td><input type="text" baza-bind="records[${idx}].lastname"></td>
            <td><input type="text" baza-bind="records[${idx}].error"></td>
            <td><span baza-bind="records[${idx}].ts"></span></td>
          </tr>
        `);
      });
    }

    // Initialize with initial data
    renderTableRows(initialData);

    // Create Baza instance bound to whole table
    const model = { records: initialData };
    const baza = new Baza(model, '#recordsTable');

    // Example: React to any field change and log updates
    baza.on('records', (newVal) => {
      console.log("Full records updated:", JSON.stringify(newVal, null, 2));
    });

    // Button: Replace ALL records with new JSON
    document.getElementById('updateAll').addEventListener('click', () => {
      baza.model.records = [
        { firstname: "Alice", lastname: "Updated", error: "new bulk error", ts: new Date().toISOString() },
        { firstname: "Bob", lastname: "Replaced", error: "new issue", ts: new Date().toISOString() }
      ];
      renderTableRows(baza.model.records); // re-render DOM for new size
    });

    // Button: Update ONE record dynamically (record[1])
    document.getElementById('updateOne').addEventListener('click', () => {
      baza.model.records[1].error = "Manually fixed error";
      baza.model.records[1].ts = new Date().toISOString();
      // No re-render needed because Baza updates bindings automatically!
    });
  </script>
</body>
</html>