Artifact
f9fd9571b9a5adc595125635b05a516a344dad59a05b12584816de4027ba18e8:
0000: 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0a <!DOCTYPE html>.
0010: 3c 68 74 6d 6c 3e 0a 3c 68 65 61 64 3e 0a 20 20 <html>.<head>.
0020: 3c 74 69 74 6c 65 3e 3c 2f 74 69 74 6c 65 3e 0a <title></title>.
0030: 3c 2f 68 65 61 64 3e 0a 3c 62 6f 64 79 3e 0a 20 </head>.<body>.
0040: 20 3c 6d 79 2d 74 61 67 3e 3c 2f 6d 79 2d 74 61 <my-tag></my-ta
0050: 67 3e 0a 0a 20 20 3c 73 63 72 69 70 74 20 73 72 g>.. <script sr
0060: 63 3d 22 2e 2e 2f 2e 2e 2f 64 69 73 74 2f 72 69 c="../../dist/ri
0070: 6f 74 2f 72 69 6f 74 2b 63 6f 6d 70 69 6c 65 72 ot/riot+compiler
0080: 2e 6a 73 22 3e 3c 2f 73 63 72 69 70 74 3e 0a 0a .js"></script>..
0090: 20 20 3c 73 63 72 69 70 74 3e 0a 0a 20 20 72 69 <script>.. ri
00a0: 6f 74 2e 74 61 67 28 27 6d 79 2d 74 61 67 27 2c ot.tag('my-tag',
00b0: 20 27 3c 64 69 76 3e 20 3c 68 31 3e 52 69 6f 74 '<div> <h1>Riot
00c0: 20 3c 62 75 74 74 6f 6e 20 6f 6e 63 6c 69 63 6b <button onclick
00d0: 3d 22 7b 20 63 6c 69 63 6b 65 64 20 7d 22 3e 72 ="{ clicked }">r
00e0: 65 76 65 72 73 65 20 6c 69 73 74 3c 2f 62 75 74 everse list</but
00f0: 74 6f 6e 3e 20 3c 73 70 61 6e 20 72 65 66 3d 22 ton> <span ref="
0100: 74 69 6d 65 73 74 61 6d 70 22 3e 3c 2f 73 70 61 timestamp"></spa
0110: 6e 3e 3c 2f 68 31 3e 20 3c 68 32 20 65 61 63 68 n></h1> <h2 each
0120: 3d 22 7b 20 69 74 65 6d 2c 20 69 20 69 6e 20 6f ="{ item, i in o
0130: 70 74 73 2e 69 74 65 6d 73 20 7d 22 3e 4c 69 6e pts.items }">Lin
0140: 65 20 23 7b 20 69 74 65 6d 2e 76 61 6c 75 65 20 e #{ item.value
0150: 7d 2c 20 7b 20 69 20 7d 3c 2f 68 32 3e 20 3c 2f }, { i }</h2> </
0160: 64 69 76 3e 27 2c 20 66 75 6e 63 74 69 6f 6e 28 div>', function(
0170: 6f 70 74 73 29 20 7b 0a 0a 20 20 20 20 76 61 72 opts) {.. var
0180: 20 73 65 6c 66 20 3d 20 74 68 69 73 2c 0a 20 20 self = this,.
0190: 20 20 20 20 78 20 3d 20 6e 65 77 20 44 61 74 65 x = new Date
01a0: 28 29 2e 67 65 74 54 69 6d 65 28 29 0a 0a 20 20 ().getTime()..
01b0: 20 20 74 68 69 73 2e 69 74 65 6d 73 20 3d 20 6f this.items = o
01c0: 70 74 73 2e 69 74 65 6d 73 0a 0a 20 20 20 20 74 pts.items.. t
01d0: 68 69 73 2e 63 6c 69 63 6b 65 64 20 3d 20 66 75 his.clicked = fu
01e0: 6e 63 74 69 6f 6e 28 29 20 7b 0a 20 20 20 20 20 nction() {.
01f0: 20 78 20 3d 20 6e 65 77 20 44 61 74 65 28 29 2e x = new Date().
0200: 67 65 74 54 69 6d 65 28 29 0a 20 20 20 20 20 20 getTime().
0210: 73 65 6c 66 2e 69 74 65 6d 73 20 3d 20 74 68 69 self.items = thi
0220: 73 2e 69 74 65 6d 73 2e 72 65 76 65 72 73 65 28 s.items.reverse(
0230: 29 0a 20 20 20 20 7d 0a 0a 20 20 20 20 74 68 69 ). }.. thi
0240: 73 2e 6f 6e 28 27 75 70 64 61 74 65 64 27 2c 20 s.on('updated',
0250: 66 75 6e 63 74 69 6f 6e 28 29 20 7b 0a 20 20 20 function() {.
0260: 20 20 20 74 68 69 73 2e 72 65 66 73 2e 74 69 6d this.refs.tim
0270: 65 73 74 61 6d 70 2e 69 6e 6e 65 72 48 54 4d 4c estamp.innerHTML
0280: 20 3d 20 27 20 2d 20 52 65 76 65 72 73 69 6e 67 = ' - Reversing
0290: 20 74 6f 6f 6b 20 27 20 2b 20 28 20 6e 65 77 20 took ' + ( new
02a0: 44 61 74 65 28 29 2e 67 65 74 54 69 6d 65 28 29 Date().getTime()
02b0: 20 2d 20 78 20 29 20 2b 20 27 6d 73 27 0a 20 20 - x ) + 'ms'.
02c0: 20 20 7d 29 0a 0a 20 20 7d 29 0a 0a 20 20 76 61 }).. }).. va
02d0: 72 20 69 74 65 6d 73 20 3d 20 5b 5d 0a 20 20 66 r items = []. f
02e0: 6f 72 20 28 20 76 61 72 20 69 20 3d 20 30 3b 20 or ( var i = 0;
02f0: 69 20 3c 20 31 30 30 30 30 3b 20 69 2b 2b 20 29 i < 10000; i++ )
0300: 20 7b 0a 20 20 20 20 69 74 65 6d 73 2e 70 75 73 {. items.pus
0310: 68 28 20 7b 20 76 61 6c 75 65 3a 20 69 20 7d 20 h( { value: i }
0320: 29 0a 20 20 7d 0a 20 20 72 69 6f 74 2e 6d 6f 75 ). }. riot.mou
0330: 6e 74 28 27 2a 27 2c 20 7b 20 69 74 65 6d 73 3a nt('*', { items:
0340: 20 69 74 65 6d 73 20 7d 20 29 5b 30 5d 0a 0a 20 items } )[0]..
0350: 20 3c 2f 73 63 72 69 70 74 3e 0a 0a 3c 2f 62 6f </script>..</bo
0360: 64 79 3e 0a 3c 2f 68 74 6d 6c 3e dy>.</html>