Artifact
f985e168833b3ce95a8a782b73cacabef704e259d15952951ae6b07f49256e6c:
0000: 3c 79 69 65 6c 64 2d 63 68 69 6c 64 3e 0a 0a 20 <yield-child>..
0010: 20 3c 68 31 3e 47 72 65 65 74 69 6e 67 3c 2f 68 <h1>Greeting</h
0020: 31 3e 0a 20 20 3c 79 69 65 6c 64 2f 3e 0a 20 20 1>. <yield/>.
0030: 74 68 69 73 2e 67 72 65 65 74 69 6e 67 20 3d 20 this.greeting =
0040: 27 66 72 6f 6d 20 74 68 65 20 63 68 69 6c 64 27 'from the child'
0050: 0a 0a 3c 2f 79 69 65 6c 64 2d 63 68 69 6c 64 3e ..</yield-child>
0060: 0a 0a 3c 79 69 65 6c 64 2d 63 68 69 6c 64 2d 32 ..<yield-child-2
0070: 3e 0a 0a 20 20 3c 68 31 3e 47 72 65 65 74 69 6e >.. <h1>Greetin
0080: 67 20 7b 20 74 68 69 73 2e 70 61 72 65 6e 74 2e g { this.parent.
0090: 67 72 65 65 74 69 6e 67 20 7d 3c 2f 68 31 3e 0a greeting }</h1>.
00a0: 20 20 3c 68 32 3e 7b 20 6f 70 74 73 2e 73 75 62 <h2>{ opts.sub
00b0: 74 69 74 6c 65 20 7d 3c 2f 68 32 3e 0a 20 20 3c title }</h2>. <
00c0: 79 69 65 6c 64 2f 3e 0a 20 20 74 68 69 73 2e 67 yield/>. this.g
00d0: 72 65 65 74 69 6e 67 20 3d 20 27 66 72 6f 6d 20 reeting = 'from
00e0: 74 68 65 20 63 68 69 6c 64 27 0a 3c 2f 79 69 65 the child'.</yie
00f0: 6c 64 2d 63 68 69 6c 64 2d 32 3e 0a 0a 0a 3c 79 ld-child-2>...<y
0100: 69 65 6c 64 2d 70 61 72 65 6e 74 3e 0a 20 20 3c ield-parent>. <
0110: 68 31 3e 48 65 6c 6c 6f 2c 20 3c 79 69 65 6c 64 h1>Hello, <yield
0120: 2f 3e 3c 2f 68 31 3e 0a 0a 20 20 3c 79 69 65 6c /></h1>.. <yiel
0130: 64 2d 63 68 69 6c 64 3e 0a 20 20 20 20 3c 69 20 d-child>. <i
0140: 6f 6e 63 6c 69 63 6b 3d 7b 20 70 61 72 65 6e 74 onclick={ parent
0150: 2e 73 61 79 53 6f 6d 65 74 68 69 6e 67 20 7d 20 .saySomething }
0160: 3e 7b 20 67 72 65 65 74 69 6e 67 20 7d 3c 2f 69 >{ greeting }</i
0170: 3e 0a 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 >. <div class
0180: 3d 7b 20 73 65 6c 65 63 74 65 64 3a 20 70 61 72 ={ selected: par
0190: 65 6e 74 2e 69 73 53 65 6c 65 63 74 65 64 20 7d ent.isSelected }
01a0: 3e 0a 20 20 20 20 20 20 3c 62 3e 77 6f 6f 68 61 >. <b>wooha
01b0: 3c 2f 62 3e 0a 20 20 20 20 3c 2f 64 69 76 3e 0a </b>. </div>.
01c0: 20 20 3c 2f 79 69 65 6c 64 2d 63 68 69 6c 64 3e </yield-child>
01d0: 0a 0a 20 20 74 68 69 73 2e 67 72 65 65 74 69 6e .. this.greetin
01e0: 67 20 3d 20 27 66 72 6f 6d 20 74 68 65 20 70 61 g = 'from the pa
01f0: 72 65 6e 74 27 0a 0a 20 20 73 61 79 53 6f 6d 65 rent'.. saySome
0200: 74 68 69 6e 67 28 29 20 7b 0a 0a 20 20 20 20 74 thing() {.. t
0210: 68 69 73 2e 67 72 65 65 74 69 6e 67 20 3d 20 27 his.greeting = '
0220: 49 20 61 6d 20 61 6c 69 76 65 21 27 0a 0a 20 20 I am alive!'..
0230: 20 20 69 66 20 28 6f 70 74 73 2e 73 61 79 53 6f if (opts.saySo
0240: 6d 65 74 68 69 6e 67 29 0a 20 20 20 20 20 20 6f mething). o
0250: 70 74 73 2e 73 61 79 53 6f 6d 65 74 68 69 6e 67 pts.saySomething
0260: 28 29 0a 0a 20 20 20 20 74 68 69 73 2e 75 70 64 ().. this.upd
0270: 61 74 65 28 29 0a 0a 20 20 7d 2e 62 69 6e 64 28 ate().. }.bind(
0280: 74 68 69 73 29 0a 0a 3c 2f 79 69 65 6c 64 2d 70 this)..</yield-p
0290: 61 72 65 6e 74 3e 0a 0a 3c 79 69 65 6c 64 2d 6c arent>..<yield-l
02a0: 6f 6f 70 3e 0a 20 20 3c 68 31 3e 48 65 6c 6c 6f oop>. <h1>Hello
02b0: 2c 20 3c 79 69 65 6c 64 2f 3e 3c 2f 68 31 3e 0a , <yield/></h1>.
02c0: 0a 20 20 3c 79 69 65 6c 64 2d 63 68 69 6c 64 2d . <yield-child-
02d0: 32 20 65 61 63 68 3d 7b 20 69 74 65 6d 73 20 7d 2 each={ items }
02e0: 20 73 75 62 74 69 74 6c 65 3d 7b 20 6e 61 6d 65 subtitle={ name
02f0: 20 7d 3e 0a 20 20 20 20 3c 69 20 6f 6e 63 6c 69 }>. <i oncli
0300: 63 6b 3d 7b 20 70 61 72 65 6e 74 2e 73 61 79 53 ck={ parent.sayS
0310: 6f 6d 65 74 68 69 6e 67 20 7d 20 3e 7b 20 67 72 omething } >{ gr
0320: 65 65 74 69 6e 67 20 7d 3c 2f 69 3e 0a 20 20 20 eeting }</i>.
0330: 20 3c 64 69 76 20 63 6c 61 73 73 3d 7b 20 73 65 <div class={ se
0340: 6c 65 63 74 65 64 3a 20 70 61 72 65 6e 74 2e 69 lected: parent.i
0350: 73 53 65 6c 65 63 74 65 64 20 7d 3e 0a 20 20 20 sSelected }>.
0360: 20 20 20 3c 62 3e 77 6f 6f 68 61 3c 2f 62 3e 0a <b>wooha</b>.
0370: 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 3c 2f 79 </div>. </y
0380: 69 65 6c 64 2d 63 68 69 6c 64 2d 32 3e 0a 0a 20 ield-child-2>..
0390: 20 74 68 69 73 2e 67 72 65 65 74 69 6e 67 20 3d this.greeting =
03a0: 20 27 66 72 6f 6d 20 74 68 65 20 70 61 72 65 6e 'from the paren
03b0: 74 27 0a 20 20 74 68 69 73 2e 69 74 65 6d 73 20 t'. this.items
03c0: 3d 20 5b 0a 20 20 20 20 7b 20 6e 61 6d 65 3a 20 = [. { name:
03d0: 22 73 75 62 74 69 74 6c 65 31 22 20 7d 2c 0a 20 "subtitle1" },.
03e0: 20 20 20 7b 20 6e 61 6d 65 3a 20 22 73 75 62 74 { name: "subt
03f0: 69 74 6c 65 32 22 20 7d 2c 0a 20 20 20 20 7b 20 itle2" },. {
0400: 6e 61 6d 65 3a 20 22 73 75 62 74 69 74 6c 65 33 name: "subtitle3
0410: 22 20 7d 2c 0a 20 20 20 20 7b 20 6e 61 6d 65 3a " },. { name:
0420: 20 22 73 75 62 74 69 74 6c 65 34 22 20 7d 2c 0a "subtitle4" },.
0430: 20 20 20 20 7b 20 6e 61 6d 65 3a 20 22 73 75 62 { name: "sub
0440: 74 69 74 6c 65 35 22 20 7d 0a 20 20 5d 0a 0a 20 title5" }. ]..
0450: 20 73 61 79 53 6f 6d 65 74 68 69 6e 67 28 29 20 saySomething()
0460: 7b 0a 0a 20 20 20 20 74 68 69 73 2e 67 72 65 65 {.. this.gree
0470: 74 69 6e 67 20 3d 20 27 49 20 61 6d 20 61 6c 69 ting = 'I am ali
0480: 76 65 21 27 0a 0a 20 20 20 20 69 66 20 28 6f 70 ve!'.. if (op
0490: 74 73 2e 73 61 79 53 6f 6d 65 74 68 69 6e 67 29 ts.saySomething)
04a0: 0a 20 20 20 20 20 20 6f 70 74 73 2e 73 61 79 53 . opts.sayS
04b0: 6f 6d 65 74 68 69 6e 67 28 29 0a 0a 20 20 20 20 omething()..
04c0: 74 68 69 73 2e 75 70 64 61 74 65 28 29 0a 0a 20 this.update()..
04d0: 20 7d 2e 62 69 6e 64 28 74 68 69 73 29 0a 0a 3c }.bind(this)..<
04e0: 2f 79 69 65 6c 64 2d 6c 6f 6f 70 3e 0a 0a 0a /yield-loop>...