Skip to content

Instantly share code, notes, and snippets.

@juriansluiman
Created January 28, 2015 10:49
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save juriansluiman/02e6da3b0e315cb5f9fd to your computer and use it in GitHub Desktop.
Save juriansluiman/02e6da3b0e315cb5f9fd to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

riot@2.0.7 is installed

@boynet
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
Copy link

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