/** @jsx React.DOM */
/* global React, Backbone, $ */
var ExampleModel = Backbone.Model.extend({
defaults: {
name: 'Backbone.View'
}
});
var DisplayView = React.createClass({
componentDidMount: function() {
this.props.model.on('change', function() {
this.forceUpdate();
}.bind(this));
},
render: function() {
return (
<p>
{this.props.model.get('name')}
</p>
);
}
});
var ToggleView = React.createClass({
handleClick: function() {
this.props.model.set('name', 'React');
},
render: function() {
return (
<button onClick={this.handleClick}>
model.set('name', 'React');
</button>
);
}
});
var model = new ExampleModel();
React.renderComponent((
<div>
<DisplayView model={model} />
<ToggleView model={model} />
</div>
), document.body);
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<body>
<div class="display-container"></div>
<div class="button-container"></div>
</body>