Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The react tutorial for riot
<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>
<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

This comment has been minimized.

Copy link

luisrudge commented Jan 29, 2015

This example is not working.
Uncaught SyntaxError: Unexpected token . comments.js:17

This is the generated javascript:

riot.tag('comment-box', '<h1>{ opts.title }</h1> <comment-list url="{ opts.url }" comments="{ comments }"></comment-list> <comment-form url="{ opts.url }"></comment-form>', function(opts) {

  this.comments = []

  this.add = function(comment) {
    this.comments.push(comment)
    this.update();
  }.bind(this);

  this.load = function() {
    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()
      }.bind(this);
    }
    request.send()
  }

  this.load()
  this.on('mount', function() {
    setInterval(this.load, this.opts.interval)
  })

});

riot.tag('comment-list', '<comment each="{ opts.comments }" name="{ this.name }" message="{ this.message }"></comment>', function(opts) {

});

< 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>
@luisrudge

This comment has been minimized.

Copy link

luisrudge commented Jan 29, 2015

riot@2.0.7 is installed

@boynet

This comment has been minimized.

Copy link

boynet commented Jul 9, 2015

@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)

@yazhouzou

This comment has been minimized.

Copy link

yazhouzou commented Jul 22, 2015

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.