Artifact
7118282fc56f5db067f29be90c8ec25ba9df099b1ada5ebe1c9c3ec683c07d58:
0000: 3c 6c 6f 6f 70 2d 65 76 65 6e 74 73 3e 0a 20 20 <loop-events>.
0010: 3c 69 6e 6e 65 72 2d 6c 6f 6f 70 2d 65 76 65 6e <inner-loop-even
0020: 74 73 20 6f 6e 63 6c 69 63 6b 3d 7b 20 63 6c 69 ts onclick={ cli
0030: 63 6b 20 7d 20 65 61 63 68 3d 7b 20 6f 75 74 65 ck } each={ oute
0040: 72 43 6f 75 6e 74 2c 20 6f 75 74 65 72 49 20 69 rCount, outerI i
0050: 6e 20 63 6f 75 6e 74 65 72 20 7d 3e 7b 20 6f 75 n counter }>{ ou
0060: 74 65 72 43 6f 75 6e 74 20 7d 3c 2f 69 6e 6e 65 terCount }</inne
0070: 72 2d 6c 6f 6f 70 2d 65 76 65 6e 74 73 3e 0a 20 r-loop-events>.
0080: 20 74 68 69 73 2e 63 6f 75 6e 74 65 72 20 3d 20 this.counter =
0090: 5b 20 27 6f 75 74 27 20 5d 0a 20 20 74 68 69 73 [ 'out' ]. this
00a0: 2e 63 62 20 3d 20 6f 70 74 73 2e 63 62 0a 20 20 .cb = opts.cb.
00b0: 63 6c 69 63 6b 28 65 29 20 7b 0a 20 20 20 20 74 click(e) {. t
00c0: 68 69 73 2e 63 62 28 65 2c 20 65 2e 69 74 65 6d his.cb(e, e.item
00d0: 29 0a 20 20 7d 0a 3c 2f 6c 6f 6f 70 2d 65 76 65 ). }.</loop-eve
00e0: 6e 74 73 3e 0a 0a 3c 69 6e 6e 65 72 2d 6c 6f 6f nts>..<inner-loo
00f0: 70 2d 65 76 65 6e 74 73 3e 0a 20 20 3c 70 3e 3c p-events>. <p><
0100: 79 69 65 6c 64 3e 3c 2f 79 69 65 6c 64 3e 3c 2f yield></yield></
0110: 70 3e 0a 20 20 3c 75 6c 3e 0a 20 20 20 20 3c 6c p>. <ul>. <l
0120: 69 20 65 61 63 68 3d 7b 20 69 6e 6e 65 72 43 6f i each={ innerCo
0130: 75 6e 74 2c 20 69 6e 6e 65 72 49 20 69 6e 20 63 unt, innerI in c
0140: 6f 75 6e 74 65 72 20 7d 20 6f 6e 63 6c 69 63 6b ounter } onclick
0150: 3d 7b 20 63 6c 69 63 6b 20 7d 3e 0a 20 20 20 20 ={ click }>.
0160: 20 20 43 6c 69 63 6b 20 6d 65 21 20 7b 20 69 6e Click me! { in
0170: 6e 65 72 49 20 7d 20 2d 20 7b 20 69 6e 6e 65 72 nerI } - { inner
0180: 43 6f 75 6e 74 20 7d 0a 20 20 20 20 20 20 3c 6c Count }. <l
0190: 6f 6f 70 2d 65 76 65 6e 74 73 2d 62 75 74 74 6f oop-events-butto
01a0: 6e 2d 31 20 63 62 3d 7b 20 63 62 20 7d 3e 3c 2f n-1 cb={ cb }></
01b0: 6c 6f 6f 70 2d 65 76 65 6e 74 73 2d 62 75 74 74 loop-events-butt
01c0: 6f 6e 2d 31 3e 0a 20 20 20 20 20 20 3c 6c 6f 6f on-1>. <loo
01d0: 70 2d 65 76 65 6e 74 73 2d 62 75 74 74 6f 6e 2d p-events-button-
01e0: 32 20 63 62 3d 7b 20 63 62 20 7d 3e 3c 2f 6c 6f 2 cb={ cb }></lo
01f0: 6f 70 2d 65 76 65 6e 74 73 2d 62 75 74 74 6f 6e op-events-button
0200: 2d 32 3e 0a 20 20 20 20 3c 2f 6c 69 3e 0a 20 20 -2>. </li>.
0210: 3c 2f 75 6c 3e 0a 0a 20 20 74 68 69 73 2e 63 62 </ul>.. this.cb
0220: 20 3d 20 74 68 69 73 2e 70 61 72 65 6e 74 2e 63 = this.parent.c
0230: 62 0a 20 20 74 68 69 73 2e 63 6f 75 6e 74 65 72 b. this.counter
0240: 20 3d 20 5b 20 27 69 6e 27 20 5d 0a 0a 20 20 63 = [ 'in' ].. c
0250: 6c 69 63 6b 28 65 29 20 7b 0a 20 20 20 20 74 68 lick(e) {. th
0260: 69 73 2e 63 62 28 65 2c 20 65 2e 69 74 65 6d 29 is.cb(e, e.item)
0270: 0a 20 20 7d 0a 0a 3c 2f 69 6e 6e 65 72 2d 6c 6f . }..</inner-lo
0280: 6f 70 2d 65 76 65 6e 74 73 3e 0a 0a 3c 6c 6f 6f op-events>..<loo
0290: 70 2d 65 76 65 6e 74 73 2d 62 75 74 74 6f 6e 2d p-events-button-
02a0: 31 3e 0a 20 20 3c 62 75 74 74 6f 6e 20 6f 6e 63 1>. <button onc
02b0: 6c 69 63 6b 3d 7b 20 63 6c 69 63 6b 20 7d 3e 43 lick={ click }>C
02c0: 6c 69 63 6b 20 6d 65 20 7b 20 69 6e 6e 65 72 49 lick me { innerI
02d0: 20 7d 3c 2f 62 75 74 74 6f 6e 3e 0a 20 20 63 6c }</button>. cl
02e0: 69 63 6b 28 65 29 20 7b 0a 20 20 20 20 6f 70 74 ick(e) {. opt
02f0: 73 2e 63 62 28 65 2c 20 65 2e 69 74 65 6d 29 0a s.cb(e, e.item).
0300: 20 20 7d 0a 3c 2f 6c 6f 6f 70 2d 65 76 65 6e 74 }.</loop-event
0310: 73 2d 62 75 74 74 6f 6e 2d 31 3e 0a 0a 3c 6c 6f s-button-1>..<lo
0320: 6f 70 2d 65 76 65 6e 74 73 2d 62 75 74 74 6f 6e op-events-button
0330: 2d 32 3e 0a 20 20 3c 62 75 74 74 6f 6e 20 6f 6e -2>. <button on
0340: 63 6c 69 63 6b 3d 7b 20 63 6c 69 63 6b 20 7d 3e click={ click }>
0350: 43 6c 69 63 6b 20 6d 65 20 7b 20 69 6e 6e 65 72 Click me { inner
0360: 49 20 7d 3c 2f 62 75 74 74 6f 6e 3e 0a 0a 20 20 I }</button>..
0370: 63 6c 69 63 6b 28 65 29 20 7b 0a 20 20 20 20 6f click(e) {. o
0380: 70 74 73 2e 63 62 28 65 2c 20 65 2e 69 74 65 6d pts.cb(e, e.item
0390: 29 0a 20 20 7d 0a 3c 2f 6c 6f 6f 70 2d 65 76 65 ). }.</loop-eve
03a0: 6e 74 73 2d 62 75 74 74 6f 6e 2d 32 3e nts-button-2>