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, imgUrl: "https://drpem3xzef3kf.cloudfront.net/photos/pets/32707403/1/?bust=1436666804&width=200&no_scale_up=1" , 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 |