Why Ember.js Rocks - Components

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.1/ember.min.js"></script>
<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>

CSS

body { margin: 3em; }

JavaScript

App = Ember.Application.create();

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