example: re-rendering .for()

example/app.js

@@ -26,33 +26,44 @@ const Test = {
 
 const List = {
   name: 'my-list',
-  state: { items: [] },
+  state: {
+    items: [
+      { id: 1, title: 'List item #1' },
+      { id: 2, title: 'List item #2' },
+      { id: 3, title: 'List item #3' },
+      { id: 4, title: 'List item #4' },
+      { id: 5, title: 'List item #5' },
+      { id: 6, title: 'List item #6' }
+    ]
+  },
   template: html`
     <div>
       <ul>
         <li>
           <span o-text="id"></span>: <span o-text="title"></span>
-          <span o-text="$store.foo"></span>
+          <!-- TODO: Fix the use of $store with re-rendering loop() -->
+          <!-- <span o-text="$store.foo"></span> -->
         </li>
       </ul>
       <p>len: <span o-text="len"></span></p>
       <button>Click me</button>
     </div>
   `,
-  setup ({ parent, query, computed }) {
+  setup ({ parent, query, computed, state }) {
     computed('len', ({ state }) => state.items.length)
 
     const li = query('li')
     const btn = query('button')
 
-    btn.on('click', function ({ store, state }) {
+    btn.on('click', function ({ state }) {
       const id = state.items.length + 1
 
-      store.set('foo', 'baz')
-      state.items = [...state.items, { id, title: 'foo' }]
+      state.items.push({ id, title: 'foo' })
+      state.items[0].title = 'test #1'
+      state.items.splice(1, 1)
     })
 
-    li.for(parent.state.items, function ({ el, item }) {
+    li.for(state.items, 'id', function ({ el, item }) {
       if (item.id % 2 === 0) {
         el.style.fontWeight = 'bold'
         el.style.color = 'coral'