Ember.js inputs with labels via a custom ContainerView instance

custom_inputs.js.coffee

App.FieldView = Em.ContainerView.extend
  tagName: ''
  type: 'text'
  label: null
  value: null
  size: '30'
  required: null
  requiredAttribute: (->
    if @get('required') == 'true' then '' else null
  ).property('required')

  childViews: 'labelView dataView'.w()

  labelView: Em.View.extend
    tagName: 'label'
    attributeBindings: ['for']
    forBinding: 'parentView.dataView.elementId'
    textBinding: 'parentView.label'
    requiredBinding: 'parentView.required'
    defaultTemplate: Em.Handlebars.compile('{{view.text}}{{#if view.required}}<abbr title="Required">*</abbr>{{/if}}')

  dataView: Em.TextField.extend
    attributeBindings: 'type value size placeholder required'.w()

    typeBinding: 'parentView.type'
    sizeBinding: 'parentView.size'
    valueBinding: 'parentView.value'
    requiredBinding: 'parentView.requiredAttribute'

App.TextField = App.FieldView.extend()

App.TextArea = App.FieldView.extend
  dataView: Em.TextArea.extend()

App.EmailField = App.FieldView.extend
  type: 'email'

App.PasswordField = App.FieldView.extend
  type: 'password'

App.NumberField = App.FieldView.extend
  dataView: Em.TextField.extend
    type: 'number'
    attributeBindings: 'type value size placeholder min max step required'.w()

    minBinding: 'parentView.min'
    maxBinding: 'parentView.max'
    sizeBinding: 'parentView.size'
    valueBinding: 'parentView.value'
    requiredBinding: 'parentView.requiredAttribute'

{{view App.NumberField label="Test" placeholder="Amount" size="5" min="0" max="10" required="true"}}

…will produce something like:

<label id="ember541" class="ember-view" for="ember553">
  <script id="metamorph-10-start" type="text/x-placeholder"></script>
  Amount
  <script id="metamorph-10-end" type="text/x-placeholder"></script>
  <script id="metamorph-11-start" type="text/x-placeholder"></script>
  <abbr title="Required">*</abbr>
  <script id="metamorph-11-end" type="text/x-placeholder"></script>
</label>
<input id="ember553" class="ember-view ember-text-field" type="number" size="5" min="0" max="10" required>

Renamed valueSize to just size.