### 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`