Artifact
a87aeadb0c8c9705327f23125d7c9cdf38afd74e8712bd7b75b0f6b0a4bc57f8:
0000: 0a 3c 6c 6f 6f 70 2d 63 6f 6e 74 65 78 74 3e 0a .<loop-context>.
0010: 0a 20 20 3c 6c 69 20 65 61 63 68 3d 7b 20 69 74 . <li each={ it
0020: 65 6d 73 20 7d 3e 0a 20 20 20 20 3c 61 20 6f 6e ems }>. <a on
0030: 63 6c 69 63 6b 3d 7b 20 74 6f 67 67 6c 65 20 7d click={ toggle }
0040: 3e 7b 20 74 69 74 6c 65 20 7d 3c 2f 61 3e 0a 20 >{ title }</a>.
0050: 20 20 20 3c 61 20 6f 6e 63 6c 69 63 6b 3d 7b 20 <a onclick={
0060: 72 65 6d 6f 76 65 20 7d 3e 72 65 6d 6f 76 65 3c remove }>remove<
0070: 2f 61 3e 0a 20 20 20 20 3c 61 20 6f 6e 63 6c 69 /a>. <a oncli
0080: 63 6b 3d 7b 20 66 6e 20 7d 3e 66 6e 3c 2f 61 3e ck={ fn }>fn</a>
0090: 0a 20 20 20 20 3c 73 70 61 6e 20 69 66 3d 7b 20 . <span if={
00a0: 64 6f 6e 65 20 7d 3e 7b 20 70 61 72 65 6e 74 2e done }>{ parent.
00b0: 72 61 6e 64 20 7d 3c 2f 73 70 61 6e 3e 0a 20 20 rand }</span>.
00c0: 3c 2f 6c 69 3e 0a 0a 20 20 3c 62 75 74 74 6f 6e </li>.. <button
00d0: 20 6f 6e 63 6c 69 63 6b 3d 7b 20 72 61 6e 64 6f onclick={ rando
00e0: 6d 20 7d 3e 53 65 74 20 72 61 6e 64 6f 6d 3c 2f m }>Set random</
00f0: 62 75 74 74 6f 6e 3e 0a 0a 20 20 76 61 72 20 73 button>.. var s
0100: 65 6c 66 20 3d 20 74 68 69 73 0a 0a 20 20 74 68 elf = this.. th
0110: 69 73 2e 69 74 65 6d 73 20 3d 20 5b 0a 20 20 20 is.items = [.
0120: 20 7b 20 74 69 74 6c 65 3a 20 27 45 78 69 73 74 { title: 'Exist
0130: 69 6e 67 20 23 31 27 2c 20 64 6f 6e 65 3a 20 74 ing #1', done: t
0140: 72 75 65 20 7d 2c 0a 20 20 20 20 7b 20 74 69 74 rue },. { tit
0150: 6c 65 3a 20 27 45 78 69 73 74 69 6e 67 20 23 32 le: 'Existing #2
0160: 27 2c 20 66 6e 3a 20 66 75 6e 63 74 69 6f 6e 28 ', fn: function(
0170: 29 20 7b 0a 20 20 20 20 20 20 73 65 6c 66 2e 69 ) {. self.i
0180: 74 65 6d 73 5b 32 5d 2e 74 69 74 6c 65 20 3d 20 tems[2].title =
0190: 27 6b 69 73 73 61 6c 61 27 0a 20 20 20 20 20 20 'kissala'.
01a0: 73 65 6c 66 2e 75 70 64 61 74 65 28 29 0a 20 20 self.update().
01b0: 20 20 7d 7d 0a 20 20 5d 0a 0a 20 20 74 6f 67 67 }}. ].. togg
01c0: 6c 65 28 65 29 20 7b 0a 20 20 20 20 76 61 72 20 le(e) {. var
01d0: 69 74 65 6d 20 3d 20 65 2e 69 74 65 6d 0a 20 20 item = e.item.
01e0: 20 20 69 74 65 6d 2e 64 6f 6e 65 20 3d 20 21 69 item.done = !i
01f0: 74 65 6d 2e 64 6f 6e 65 0a 20 20 7d 0a 0a 20 20 tem.done. }..
0200: 72 65 6d 6f 76 65 28 65 29 20 7b 0a 20 20 20 20 remove(e) {.
0210: 76 61 72 20 69 20 3d 20 73 65 6c 66 2e 69 74 65 var i = self.ite
0220: 6d 73 2e 69 6e 64 65 78 4f 66 28 65 2e 69 74 65 ms.indexOf(e.ite
0230: 6d 29 0a 20 20 20 20 73 65 6c 66 2e 69 74 65 6d m). self.item
0240: 73 2e 73 70 6c 69 63 65 28 69 2c 20 31 29 0a 20 s.splice(i, 1).
0250: 20 7d 0a 0a 20 20 72 61 6e 64 6f 6d 28 29 20 7b }.. random() {
0260: 0a 20 20 20 20 73 65 6c 66 2e 72 61 6e 64 20 3d . self.rand =
0270: 20 28 27 27 20 2b 20 4d 61 74 68 2e 72 61 6e 64 ('' + Math.rand
0280: 6f 6d 28 29 29 2e 73 6c 69 63 65 28 31 30 29 0a om()).slice(10).
0290: 20 20 7d 0a 0a 20 20 74 68 69 73 2e 72 61 6e 64 }.. this.rand
02a0: 6f 6d 28 29 0a 0a 20 20 2f 2f 20 61 64 64 20 6e om().. // add n
02b0: 65 77 20 69 74 65 6d 73 0a 20 20 73 65 74 54 69 ew items. setTi
02c0: 6d 65 6f 75 74 28 66 75 6e 63 74 69 6f 6e 28 29 meout(function()
02d0: 20 7b 0a 20 20 20 20 73 65 6c 66 2e 69 74 65 6d {. self.item
02e0: 73 2e 75 6e 73 68 69 66 74 28 7b 20 74 69 74 6c s.unshift({ titl
02f0: 65 3a 20 27 54 6f 70 20 23 31 27 20 7d 29 0a 20 e: 'Top #1' }).
0300: 20 20 20 73 65 6c 66 2e 69 74 65 6d 73 2e 70 75 self.items.pu
0310: 73 68 28 7b 20 74 69 74 6c 65 3a 20 27 42 6f 74 sh({ title: 'Bot
0320: 74 6f 6d 20 23 6e 65 77 27 20 7d 29 0a 20 20 20 tom #new' }).
0330: 20 73 65 6c 66 2e 75 70 64 61 74 65 28 29 0a 0a self.update()..
0340: 20 20 7d 2c 20 31 30 30 29 0a 0a 3c 2f 6c 6f 6f }, 100)..</loo
0350: 70 2d 63 6f 6e 74 65 78 74 3e p-context>