接前一篇，把前面的ListView改成Reflux的形式
var BookActions=Reflux.createActions([
'fetchList'
]);
var BookStore = Reflux.createStore({
listenables: [BookActions],
bookList:['item1','item2','item3'],
init:function () {
this.fetchList();
console.log('init done.');
},
fetchList:function(){
this.bookList.push('item'+(this.bookList.length+1));
console.log('fetchList'+this.bookList.length);
this.trigger(this.bookList);
}
}); var TextItem = React.createClass({
render:function(){
var item = this.props.item;
return <p>this is {item}</p>
}
}); var Template = React.createClass({
render:function(){
return React.createElement(this.props.type,this.props);
}
}); var ListViewItem = React.createClass({
render:function(){
var item = this.props.item;
var cls = this.props.isSelected?'selected':'';
if(this.props.template){
return <li className={cls} onClick={this.props.onClick}><Template type={this.props.template} item={item}></Template></li>;
}else{
return <li className={cls} onClick={this.props.onClick}>{item}</li>;
}
}
}); var ListView = React.createClass({
mixins: [Reflux.connect(BookStore, 'bookstore')],
onSelect:function(item){
this.setState({selectedItem:item});
console.log('selected item:' + item);
},
render: function() {
var itemTemplate = this.props.itemTemplate?this.props.itemTemplate:'';
var selectedItem = this.state.selectedItem;
console.log('state:' + this.state); for(var key in this.state){
console.log('key='+key);
} if(this.state.bookstore){
var items = this.state.bookstore?this.state.bookstore:[];
console.log('render items:' +this.state.bookstore + '-' + items.length);
return (
<ol>
{
items.map(function (item,i) {
var isSelected = (item ==selectedItem);
return <ListViewItem key={i} item={item} template={itemTemplate} isSelected={isSelected} onClick={this.onSelect.bind(this,item)}></ListViewItem>
},this)
}
</ol>
);
}else{
return <ol></ol>;
}
}
}); React.render(
<div>
<button onClick={BookActions.fetchList}>加一个</button>
<ListView itemTemplate={TextItem}>
</ListView>
</div> ,
document.body
); BookActions.fetchList();