React Learning--listview (reflux)

Next, change the front of the ListView into the form of reflux

    varbookactions=reflux.createactions ([' Fetchlist '        ]); varBookstore =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);    }    }); varTextitem =React.createclass ({render:function(){            varitem = This. Props.item; return<p> ThisIs {item}</p>        }    }); varTemplate =React.createclass ({render:function(){            returnReact.createelement ( This. Props.type, This. Props);    }    }); varListViewItem =React.createclass ({render:function(){            varitem = This. Props.item; varCLS = 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>;            }         }    }); varListView =React.createclass ({mixins: [Reflux.connect (Bookstore,' Bookstore ')], OnSelect:function(item) { This. SetState ({selecteditem:item}); Console.log (' Selected item: ' +item); }, Render:function() {             varItemTemplate = This. props.itemtemplate? This. Props.itemtemplate: "; varSelectedItem = This. State.selecteditem; Console.log (' State: ' + This. State);  for(varKeyinch  This. State) {Console.log (' key= ' +key); }            if( This. State.bookstore) {                varItems = This. State.bookstore? This. state.bookstore:[]; Console.log (' Render items: ' + This. State.bookstore + '-' +items.length); return (                    <ol>{Items.map (function(item,i) {varisSelected = (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}> plus a </button> <listview itemtemplate={text Item}> </ListView> </div>,document.body); Bookactions.fetchlist ();

React Learning--listview (reflux)