The Demo:
The Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | var Rd = ReactDatum var ReactTilegrid = Tilegrid.ReactTilegrid var KittenModel = Backbone.Model.extend({ save: function (attrs, options){ options.success( this ) return true } }) // KITTEN_DATA is a static array of data from petfinder api // that gets loaded via script tag for the examples var KittenCollection = Backbone.Collection.extend({ model: KittenModel }) var kittenCollection = new KittenCollection(KITTEN_DATA) // The above is all backbone setup that you would probably do // elsewhere or wouldn't need to do, like stub out model save // Below is really most of what you need for a basic list // left, form right type view. All in 30 lines of code! var TilegridDisplay = React.createClass({ displayName: "TilegridDisplay" , render: function (){ return ( < Rd.Collection collection={kittenCollection}> < div className = "grid" > < Rd.CollectionStats itemDisplayName = "Kittens" /> < ReactTilegrid > < Rd.LazyPhoto attr = "imageUrl" /> < h4 >< Rd.Text attr = "name" /></ h4 > < Rd.Email attr = "breed" /> </ ReactTilegrid > </ div > < div className = "preview" > < Rd.SelectedModel placeholder = "Select a kitten to see information here" > < Rd.LazyPhoto attr = "imageUrl" /> < div className = 'top-right' > < h3 >Adopt < Rd.Text attr = "name" readonly/> Today!</ h3 > < div >< Rd.Link attr = "petfinderUrl" >Show < Rd.Text attr = "name" readonly/> on Petfinder.com</ Rd.Link ></ div > < div >< Rd.Email attr = "contactEmail" label = "Email now:" displayAsLink readonly/></ div > </ div > < Rd.ClickToEditForm className = 'kitten-form' > < div >< Rd.Text attr = "name" label = "Name: " setOnChange required/></ div > < div >< Rd.Email attr = "contactEmail" label = "Sponsor Email: " /></ div > < div >< Rd.Text attr = "description" className = "wide-input" ellipsizeAt={ false } displayAsHtml/></ div > </ Rd.ClickToEditForm > </ Rd.SelectedModel > </ div > </ Rd.Collection > ) } }) window.Demo = TilegridDisplay |