-
-
Save blahutka/4560553405ab3d1b5107 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <comment-box> | |
| <h1>{ opts.title }</h1> | |
| <comment-list url={ opts.url } comments={ comments } /> | |
| <comment-form url={ opts.url } /> | |
| this.comments = [] | |
| add(comment) { | |
| this.comments.push(comment) | |
| this.update() | |
| } | |
| load() { | |
| var request = new XMLHttpRequest(), self = this | |
| request.open('GET', opts.url, true) | |
| request.onload = function() { | |
| if (request.status >= 200 && request.status < 400) { | |
| self.comments = JSON.parse(request.responseText) | |
| self.update() | |
| } | |
| } | |
| request.send() | |
| } | |
| this.load() | |
| this.on('mount', function() { | |
| setInterval(this.load, this.opts.interval) | |
| }) | |
| </comment-box> | |
| <comment-list> | |
| <comment each={ opts.comments } name={ this.name } message={ this.message } /> | |
| </comment-list> | |
| <comment-form> | |
| <form onsubmit={ add }> | |
| <input type="text" placeholder="Your name" name="name"> | |
| <textarea cols="40" rows="40" placeholder="Say something..." name="message"></textarea> | |
| <input type="submit" value="Post"> | |
| </form> | |
| add(e) { | |
| var comment = { | |
| name: this.name.value, | |
| message: this.message.value | |
| } | |
| this.parent.add(comment) | |
| this.post(comment, e.target) | |
| } | |
| post(comment, form) { | |
| var data = new FormData | |
| data.append('name', comment.name) | |
| data.append('message', comment.message) | |
| var request = new XMLHttpRequest() | |
| request.open('POST', opts.url, true) | |
| request.onload = function() { | |
| if (request.status >= 200 && request.status < 400) { | |
| form.reset() | |
| // You might want to flash a message now | |
| } | |
| } | |
| request.send(data) | |
| } | |
| </comment-form> | |
| <comment> | |
| <div> | |
| <h2>{ opts.name }</h2> | |
| <p>{ opts.message }</p> | |
| </div> | |
| </comment> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Hello riot</title> | |
| <script src="http://cdn.jsdelivr.net/riot/2.0/riot.min.js"></script> | |
| </head> | |
| <body> | |
| <comment-box></comment-box> | |
| <script src="comments.js"></script> | |
| <script>riot.mount('comment-box', {title: 'Comments', url: '/comments.json', interval: 2000})</script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment