component.jsx

define(function (require) {

	//DOCS: http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
	var React = require('react');
	var EventsListener = require('extensions/events-listener');
	var Preloader = require('jsx!componentsCommon/PreloaderIndicator--React/PreloaderIndicator');
	var Styles = require('text!componentsPages/Example/Example.css');
	var BaseComponent = require('jsx!core/ComponentReact');

	return BaseComponent.createClass({

		eventsListener: new EventsListener(),

		getInitialState: function () {

			var model = this.props.model;
			return {
				model: model
			}
		},

		// при первом создании до создания DIV
		componentWillMount: function () {
		},

		// при первом создании когда DIV уже создан и готов
		componentDidMount: function () {

			var self = this;
			this.eventsListener.listenTo(this.state.model, 'change', function(){
				self.forceUpdate();
			});
		},

		// после первой отрисовки при изменения состояния или props до перерисовки
		componentWillUpdate: function () {
		},

		// после первой отрисовки при изменении состояния или props после перерисовки
		componentDidUpdate: function () {
		},

		// при удалении
		componentWillUnmount: function () {
			this.eventsListener.stopListening();
		},


		updateModel: function () {
			this.props.ctx.api.Example.baseRequest({
				objectId: this.state.model.id
			});
		},

		render: function () {

			var html;
			var model = this.state.model;
			var loaded = model.isLoaded();
			var error = model.isError();

			if (!loaded && !error) {
				return (<Preloader ctx={this.props.ctx}/>);
			}

			if (error) {
				html = (
					<div>
						Модель загружена с ошибкой
						<button onClick={this.updateModel}>Обновить</button>
					</div>
				);
			}

			if(!error){
				html = (
					<div>
						Модель загружена успешно {model.get('title')}
						<button onClick={this.updateModel}>Обновить</button>
					</div>
				);
			}

			return (<div className="examplePage">
				<style>{Styles}</style>
				<h1 className="examplePAge-title">Example page</h1>
				{html}
			</div>);
		}

	});
});