Created
January 28, 2015 10:49
-
-
Save juriansluiman/02e6da3b0e315cb5f9fd to your computer and use it in GitHub Desktop.
The react tutorial for riot
This file contains 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 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> |
@luisrudge not worked for me too, alot of riot docs neither.. anyway in line 7 remove "this." so it will look like: comments = [] ( i have no idea why it working)
Line 28: setInterval(this.load, this.opts.interval)
I'm not running this example, but i've found ' this.load ' is a problem, i think there should be :
setInterval(this.load.bind(this), this.opts.interval).
@luisrudge the generated js:
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
self.comments = JSON.parse(request.responseText)
self.update()
}.bind(this); // what's happend with that or why was this codes here?
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
riot@2.0.7is installed