trustieforge/public/javascripts/wechat/wechat.jsx

/**
 * Created by guange on 16/3/21.
 */

var Index = React.createClass({
    render: function(){
        return (<div>index page</div>);
    }
});

var apiUrl = '/api/v1/';

var converter = new Showdown.converter();

var PostContainer = React.createClass({
    loadDataFromServer: function(){
        $.ajax({
            url: apiUrl + 'issues/' + this.props.params.id,
            dataType: 'json',
            success: function(data){
                this.setState({data: data.data});
            }.bind(this),
            error: function(xhr,status,err){
                console.log(err);
            }.bind(this)
        })
    },
    componentDidMount: function(){
        this.loadDataFromServer();
    },
    getInitialState: function(){
        return {data: null};
    },
    render: function(){
        return (
            <PostView data={this.state.data}/>
        )issues
    }
});

var PostView = React.createClass({
    testClick: function(){
      console.log("123123");
    },

    render: function(){
        if(!this.props.data){
            return <div></div>
        }


        var issueEach = this.props.data.map(function(issue){

            var descMarkup = converter.makeHtml(issue.description.toString());

            return (
                <div className="post-container">
                    <div className="post-wrapper">
                        <div className="post-main">
                            <div className="post-avatar fl"><img src={issue.author.img_url} width="45" height="45" className="border-radius" /></div>
                            <div className="post-title hidden mb5"><span className="c-grey3 f15 fb">{issue.subject}</span></div>
                            <div className="post-title hidden"><a herf="javascript:void(0);" className="mr10">{issue.author.nickname}</a>项目问题</div>
                            <div className="cl"></div>
                            <div className="post-content c-grey2 mt10">
                                <div className="post-all-content" dangerouslySetInnerHTML={{__html: descMarkup}}></div>
                            </div>
                            <a herf="javascript:void(0);"  className="link-blue f13 fl mt5 post-more " style={{textDecoration: 'underline'}}>点击展开</a>
                            <div className="cl"></div>
                            <span onClick={this.testClick} className="c-grey f13 mt10 fl">{issue.created_on}</span>
                            <div className="cl"></div>
                        </div>
                    </div>
                </div>
            )
        });

        return(
            <div>{issueEach}</div>
        );


    }
});

var Route = ReactRouter.Route;
var Router = ReactRouter.Router;

var routes = (
    <Router>
        <Route path="/" component={Index}/>
        <Route path="issue/:id" component={PostContainer} />
    </Router>
);

React.render(routes, document.getElementById("container"));