<script type="text/x-handlebars">
  {{v-card fn=firstName street-address=address locality=city usState=usState zip=zipCode email=email}}
    
  <h3 class="subheader">Edit this card:</h3>

  <label>First Name</label>
  {{input type="text" value=firstName}}

  <label>Address</label>
  {{input type="text" value=address}}

  <label>City</label>
  {{input type="text" value=city}}

  <label>U.S. State</label>
  {{input type="text" value=usState}}

  <label>Zip Code</label>
  {{input type="text" value=zipCode}}

  <label>Email address</label>
  {{input type="text" value=email}}
</script>

<script type="text/x-handlebars" data-template-name="components/v-card">
  <ul class="vcard">
    <li class="fn">{{fn}}</li>
    <li class="street-address">{{street-address}}</li>
    <li class="locality">{{locality}}</li>
    <li><span class="state">{{usState}}</span>, <span class="zip">{{zip}}</span></li>
    <li class="email">{{email}}</li>
  </ul>
</script>  

.vcard {
  border: 1px solid #dcdcdc;
  max-width: 12em;
  padding: 0.5em;
}
.vcard li {
  list-style: none;
}
.vcard .fn {
  font-weight: bold;
}
.vcard .email {
  font-family: monospace;
}

label {
  display: block;
  margin-top: 0.5em;
}

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    firstName: 'Kerrick',
    address: '123 Example St.',
    city: 'Saint Louis',
    usState: 'Missouri',
    zipCode: '63101',
    email: 'me@kerricklong.com'
});