Artifact
10d106afb51a446f85e6534fb237957f5e1fad5af6f2b33656e79ccbc1a230a8:
0000: 3c 62 6c 6f 67 3e 0a 20 20 3c 68 31 3e 7b 20 74 <blog>. <h1>{ t
0010: 69 74 6c 65 20 7d 3c 2f 68 31 3e 0a 20 20 3c 6d itle }</h1>. <m
0020: 79 2d 70 6f 73 74 20 65 61 63 68 3d 7b 20 70 6f y-post each={ po
0030: 73 74 73 20 7d 3e 0a 20 20 20 20 3c 61 20 68 72 sts }>. <a hr
0040: 65 66 3d 7b 20 74 68 69 73 2e 70 61 72 65 6e 74 ef={ this.parent
0050: 2e 62 61 63 6b 54 6f 48 6f 6d 65 20 7d 3e 42 61 .backToHome }>Ba
0060: 63 6b 20 74 6f 20 68 6f 6d 65 3c 2f 61 3e 0a 20 ck to home</a>.
0070: 20 20 20 3c 64 69 76 20 6f 6e 63 6c 69 63 6b 3d <div onclick=
0080: 7b 20 74 68 69 73 2e 70 61 72 65 6e 74 2e 64 65 { this.parent.de
0090: 6c 65 74 65 41 6c 6c 50 6f 73 74 73 20 7d 3e 44 leteAllPosts }>D
00a0: 65 6c 65 74 65 20 61 6c 6c 20 74 68 65 20 70 6f elete all the po
00b0: 73 74 73 3c 2f 64 69 76 3e 0a 20 20 3c 2f 6d 79 sts</div>. </my
00c0: 2d 70 6f 73 74 3e 0a 0a 20 20 74 68 69 73 2e 62 -post>.. this.b
00d0: 61 63 6b 54 6f 48 6f 6d 65 20 3d 20 27 2f 68 6f ackToHome = '/ho
00e0: 6d 65 70 61 67 65 27 0a 20 20 74 68 69 73 2e 74 mepage'. this.t
00f0: 69 74 6c 65 20 3d 20 27 6d 79 20 62 6c 6f 67 20 itle = 'my blog
0100: 74 69 74 6c 65 27 0a 0a 20 20 74 68 69 73 2e 70 title'.. this.p
0110: 6f 73 74 73 20 3d 20 5b 0a 20 20 20 20 7b 20 74 osts = [. { t
0120: 69 74 6c 65 3a 20 22 70 6f 73 74 20 31 22 2c 20 itle: "post 1",
0130: 64 65 73 63 72 69 70 74 69 6f 6e 3a 20 27 6d 79 description: 'my
0140: 20 70 6f 73 74 20 64 65 73 63 72 69 70 74 69 6f post descriptio
0150: 6e 27 20 7d 2c 0a 20 20 20 20 7b 20 74 69 74 6c n' },. { titl
0160: 65 3a 20 22 70 6f 73 74 20 32 22 2c 20 64 65 73 e: "post 2", des
0170: 63 72 69 70 74 69 6f 6e 3a 20 27 6d 79 20 70 6f cription: 'my po
0180: 73 74 20 64 65 73 63 72 69 70 74 69 6f 6e 27 20 st description'
0190: 7d 0a 20 20 5d 0a 0a 20 20 2f 2f 20 74 68 65 20 }. ].. // the
01a0: 62 69 6e 64 20 69 73 20 6e 65 65 64 65 64 20 69 bind is needed i
01b0: 6e 20 74 68 69 73 20 63 61 73 65 20 74 6f 20 6b n this case to k
01c0: 65 65 70 20 74 68 65 20 70 61 72 65 6e 74 20 63 eep the parent c
01d0: 6f 6e 74 65 78 74 0a 20 20 2f 2f 20 61 6c 73 6f ontext. // also
01e0: 20 69 6e 20 74 68 65 20 63 68 69 6c 64 20 74 61 in the child ta
01f0: 67 73 0a 20 20 64 65 6c 65 74 65 41 6c 6c 50 6f gs. deleteAllPo
0200: 73 74 73 28 29 20 7b 0a 20 20 20 20 74 68 69 73 sts() {. this
0210: 2e 70 6f 73 74 73 20 3d 20 5b 5d 0a 0a 20 20 20 .posts = []..
0220: 20 2f 2f 20 77 65 20 6e 65 65 64 20 74 6f 20 74 // we need to t
0230: 72 69 67 67 65 72 20 6d 61 6e 75 61 6c 6c 79 20 rigger manually
0240: 74 68 65 20 75 70 64 61 74 65 20 66 75 6e 63 74 the update funct
0250: 69 6f 6e 0a 20 20 20 20 2f 2f 20 62 65 63 61 75 ion. // becau
0260: 73 65 20 74 68 69 73 20 66 75 6e 63 74 69 6f 6e se this function
0270: 20 67 65 74 73 20 74 72 69 67 67 65 72 65 64 20 gets triggered
0280: 66 72 6f 6d 20 61 20 63 68 69 6c 64 20 74 61 67 from a child tag
0290: 0a 20 20 20 20 2f 2f 20 61 6e 64 20 69 74 20 64 . // and it d
02a0: 6f 65 73 20 6e 6f 74 20 62 75 62 62 6c 65 20 75 oes not bubble u
02b0: 70 20 61 75 74 6f 6d 61 74 69 63 61 6c 6c 79 0a p automatically.
02c0: 20 20 20 20 74 68 69 73 2e 75 70 64 61 74 65 28 this.update(
02d0: 29 0a 20 20 7d 2e 62 69 6e 64 28 74 68 69 73 29 ). }.bind(this)
02e0: 0a 0a 3c 2f 62 6c 6f 67 3e 0a 0a 3c 6d 79 2d 70 ..</blog>..<my-p
02f0: 6f 73 74 3e 0a 20 20 3c 68 32 3e 7b 20 74 69 74 ost>. <h2>{ tit
0300: 6c 65 20 7d 3c 2f 68 32 3e 0a 20 20 3c 70 3e 7b le }</h2>. <p>{
0310: 20 64 65 73 63 72 69 70 74 69 6f 6e 20 7d 3c 2f description }</
0320: 70 3e 0a 20 20 3c 79 69 65 6c 64 2f 3e 0a 3c 2f p>. <yield/>.</
0330: 6d 79 2d 70 6f 73 74 3e my-post>