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
var Rd = ReactDatum;
 
// Say you have this model:
 
var kittenModel = new Backbone.Model({
  name: "Fluffy",
  title: "His Royal Cuteness",
  description: "He's a cuddler and a lover through and through",
  forAdoption: true,
  ageInMonths: 10,
  createdAt: 1446520828,
  sponsorEmail: "kindoldcatlady@lotsofcats.com",
  comment: ""
});
 
// To create the card on the right:
 
var KittenCard = React.createClass({
  displayName:"KittenCard",
  render: function(){
    return (
      <div className='kitten-card'>
        <Rd.Model model={kittenModel}>
          <h3>Adopt <Rd.Text attr="name"/> Today!</h3>
          <div><Rd.LazyPhoto attr="imgUrl"/></div>
          <div><Rd.Text attr="name" label="Name:"/> (<Rd.Text attr="title"/>)</div>
          <div><Rd.Email attr="sponsorEmail" label="Adoption Sponsor:" displayLink/></div>
          <Rd.Text attr="description"/>
          <h5>Leave a comment</h5>
          <Rd.Text attr="comment" inputMode="edit"/>
        </Rd.Model>
      </div>
    )
  }
})
 
window.Demo = KittenCard