seiffert · May 30, 2013 21:11
diff --git a/gistfile1.txt b/gistfile1.txt
 <!-- template.html -->
 <html>
  <head>
    <title>Hello React</title>
    <script src="build/react.min.js"></script>
    <script src="build/JSXTransformer.js"></script>
    <script src="build/showdown.js"></script>
    <script src="build/jquery-1.8.1.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
      /**
       * @jsx React.DOM
       */
      var converter = new Showdown.converter(),
      
      CommentBox = React.createClass({
        loadCommentsFromServer: function() {
          $.ajax({
            url: '/comments.json',
            dataType: 'json',
            // mimeType: 'textPlain'
          }).done((function(data) {
            this.setState({data: data});
          }).bind(this));
        },
        
        handleCommentSubmit: React.autoBind(function (comment) {
          var comments = this.state.data;
          comments.push(comment);
          this.setState({data: comments});
        }),
        
        getInitialState: function() {
          return {data: []};
        },
        
        componentWillMount: function() {
          this.loadCommentsFromServer();
          setInterval(
            this.loadCommentsFromServer.bind(this),
            this.props.pollInterval
          );
        },
        
        render: function () {
          return (
            <div class="commentBox">
              <h1>Comments</h1>
              <CommentList data={this.state.data} />
              <CommentForm onCommentSubmit={this.handleCommentSubmit} />
            </div>
          );
        }
      }),
      
      CommentList = React.createClass({
        render: function() {
          var comments = this.props.data.map(function (comment) {
            return <Comment author={comment.author}>{comment.text}</Comment>;
          });
          
          return (
            <div class="commentList">
              {comments}
            </div>
          );
        }
      }),
      
      CommentForm = React.createClass({
        handleSubmit: React.autoBind(function(ev) {
          ev.preventDefault();
          
          var author = this.refs.author.getDOMNode().value.trim();
          var text = this.refs.text.getDOMNode().value.trim();
          if (!text || !author) {
            return;
          }
          this.props.onCommentSubmit({author: author, text: text});
          this.refs.author.getDOMNode().value = '';
          this.refs.text.getDOMNode().value = '';
        }),
        render: function() {
          return (
            <form class="commentForm" onSubmit={this.handleSubmit}>
              <input type="text" placeholder="Your name" ref="author" />
              <input
                type="text"
                placeholder="Say something..."
                ref="text"
              />
              <input type="submit" />
            </form>
          );
        }
      }),
      
      Comment = React.createClass({
        render: function () {
          var rawMarkup = converter.makeHtml(this.props.children.toString());
          
          return (
            <div class="comment">
              <h3 class="author">{this.props.author}</h3>
              <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
            </div>
          );
        }
      });

      React.renderComponent(<CommentBox url="comments.json" pollInterval={5000} />, document.getElementById('content'));
    </script>
  </body>
 </html>
	<!-- template.html -->
	<html>
	<head>
	<title>Hello React</title>
	<script src="build/react.min.js"></script>
	<script src="build/JSXTransformer.js"></script>
	<script src="build/showdown.js"></script>
	<script src="build/jquery-1.8.1.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/jsx">
	/**
	* @jsx React.DOM
	*/
	var converter = new Showdown.converter(),

	CommentBox = React.createClass({
	loadCommentsFromServer: function() {
	$.ajax({
	url: '/comments.json',
	dataType: 'json',
	// mimeType: 'textPlain'
	}).done((function(data) {
	this.setState({data: data});
	}).bind(this));
	},

	handleCommentSubmit: React.autoBind(function (comment) {
	var comments = this.state.data;
	comments.push(comment);
	this.setState({data: comments});
	}),

	getInitialState: function() {
	return {data: []};
	},

	componentWillMount: function() {
	this.loadCommentsFromServer();
	setInterval(
	this.loadCommentsFromServer.bind(this),
	this.props.pollInterval
	);
	},

	render: function () {
	return (
	<div class="commentBox">
	<h1>Comments</h1>
	<CommentList data={this.state.data} />
	<CommentForm onCommentSubmit={this.handleCommentSubmit} />
	</div>
	);
	}
	}),

	CommentList = React.createClass({
	render: function() {
	var comments = this.props.data.map(function (comment) {
	return <Comment author={comment.author}>{comment.text}</Comment>;
	});

	return (
	<div class="commentList">
	{comments}
	</div>
	);
	}
	}),

	CommentForm = React.createClass({
	handleSubmit: React.autoBind(function(ev) {
	ev.preventDefault();

	var author = this.refs.author.getDOMNode().value.trim();
	var text = this.refs.text.getDOMNode().value.trim();
	if (!text \|\| !author) {
	return;
	}
	this.props.onCommentSubmit({author: author, text: text});
	this.refs.author.getDOMNode().value = '';
	this.refs.text.getDOMNode().value = '';
	}),
	render: function() {
	return (
	<form class="commentForm" onSubmit={this.handleSubmit}>
	<input type="text" placeholder="Your name" ref="author" />
	<input
	type="text"
	placeholder="Say something..."
	ref="text"
	/>
	<input type="submit" />
	</form>
	);
	}
	}),

	Comment = React.createClass({
	render: function () {
	var rawMarkup = converter.makeHtml(this.props.children.toString());

	return (
	<div class="comment">
	<h3 class="author">{this.props.author}</h3>
	<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
	</div>
	);
	}
	});

	React.renderComponent(<CommentBox url="comments.json" pollInterval={5000} />, document.getElementById('content'));
	</script>
	</body>
	</html>