React學習——ListView（Reflux）

標籤：

接前一篇，把前面的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();

 

React學習——ListView（Reflux）