一、什么是Alt
altJS是基于Flux使用Javascript应用来管理数据的类库，它简化了flux的store、actions、dispatcher。
关于Flux，以下链接都做了很好的诠释
http://news.cnblogs.com/n/208305/
http://www.cnblogs.com/linerz/p/react-flux-example-todomvc-analysis.html
二、还需要了解
React, CommonJS, ES5 Javascript, 至于ES6，本文采用ES5做例，有兴趣的朋友可以转成ES6，关于ES6浏览器兼容问题，还要下载babel进行转换。
三、安装
alt是基于Note.js开发的，所以安装前需要安装note.js
使用npm安装alt：npm install alt
四、Alt的基本结构
项目结构
|--actions/
| |--MyActions.js
|--stores/
| |--MyStore.js
|--components/
| |--MyComponent.jsx
|--alt.js
|--app.js
六、创建alt
var Alt = require(‘alt’); var flux = new Alt(); module.exports = flux;
七、创建Actions
alt 通过自定义的方法进行actions的创建createActions
var flux = require(‘…/flux’);
module.exports = flux.createActions({
GetData:function(input){
/*
webapi get 获取数据data
*/
this.dispatch(data);
},
GetDetail: function(id){
/*获取单条数据*/
this.dispatch(data);
}
});
八、创建Store
var flux = require(‘…/flux’);
var MyActions= require(‘../actions/MyActions’);
var MyStore = flux.createStore({
bindListeners:{
Handledata: MyActions.GetData,
HandleDetail:MyActions.GetDetail
},
Handledata:function (data){
this.setState({datas: data});
},
HandleDetail:function(data){
this.setState({data:data});
}
},’MyStore’);
module.exports = MyStore;
九、在View中使用MyComponent.jsx
var React = require(‘react’);
var MyStore = require(‘../Stores/MyStore’);
var MyAction = require(‘../Stores/MyAction’);
var MyComponent = React.createClass({
getInitialState:function(){
return MyStore.getState();
},
getDetail: function(data,e){
var id = data.Id;
MyAction.GetDetail (id);
},
componentDidMount: function(){
MyStore.listen(this.onChange);
},
componentWillMount: function(){
MyStore.unlisten(this.onChange);
},
onChange: function(state){
this.setState(state);
},
render: function(){
return(
<ul>
{this.state.datas.map(function(data){
Return (
<li onClick={this.getDetail.bind(null,data)}>{data.name}</li>);
})}
</ul>
);
}
});
module.exports = MyComponent;