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 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"/>
          <Tilegrid>
            <Rd.LazyPhoto attr="imageUrl"/>
            <h4><Rd.Text attr="name"/></h4>
            <Rd.Email attr="breed"/>
          </Tilegrid>
        </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