example: .for() with non-object items

tentjs · Nov 25, 2023 · ccbbd5d · ccbbd5d
1 parent dd2a9b3
commit ccbbd5d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/example/app.js b/example/app.js
@@ -69,6 +69,40 @@ const List = {
   }
 }
 
+one({
+  name: 'simple-list',
+  state: {
+    items: ['Item #1', 'Item #2', 'Item #3']
+  },
+  template: html`
+    <div>
+      <ul>
+        <li o-text></li>
+      </ul>
+      <button id="add">Add item</button>
+      <button id="reset">Reset</button>
+    </div>
+  `,
+  setup ({ query, state }) {
+    const li = query('li')
+    const add = query('#add')
+    const reset = query('#reset')
+
+    add.on('click', function ({ state }) {
+      state.items = [...state.items, `Item #${state.items.length + 1}`]
+    })
+
+    reset.on('click', function ({ state }) {
+      state.items.splice(1, 1)
+    })
+
+    li.for(['items'], function ({ el, item }) {
+      el.style.color = 'coral'
+      el.style.fontWeight = 'bold'
+    })
+  }
+})
+
 one({
   name: 'my-component',
   components: [Test, List],

diff --git a/example/index.html b/example/index.html
@@ -34,6 +34,7 @@
   </head>
   <body>
     <a href="./robots.txt" aria-label="robots.txt"></a>
+    <simple-list></simple-list>
     <my-component msg="Hi, from a prop!"></my-component>
     <test>
       <p>Hejsa</p>