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();

 

转载于:https://www.cnblogs.com/abiho/p/4567250.html