Given this chunk of HTML:

<div id="email_field" class="control-group">
  <label class="control-label" for="account.email">Email</label>
  <div id="email_input" class="controls">
    <input id="account.email" name="account.email" type="text" placeholder="jpublic@example.com">
    <span class="help-block">We just need a valid email address.</span>
  </div>
</div>

How do I turn this into a re-usable partial for whatever attribute I want? IE: email, password, password confirmation, etc.

I would assume some sort of view hierarchy but I'm not quite sure.

EDIT: After further exploration I've knocked out {{view}} and {{render}} and figured out exactly what I need:

I want to: 1. Use a specific view (InputView) 2. Use a specific controller (Preferably similarly named: InputController) ({{view}} doesn't do this I think) 3. Be able to use this multiple times ({{render}} can't do this) 4. Be able to pass in values ({{render}} can't do this)

Example:

<!-- templates/application.hbs -->
{{foo "input" name="Email" id="account.email" placeholder="jpublic@email.com"}}

// controllers/input.js
Application.InputController = Ember.ObjectController.extend({
  type: "text"
});

// views/input.js
Application.InputView = Ember.View.extend({
  templateName: "form/input"
});

<!-- templates/form/input.hbs -->
<input {{bindAttr id="id" name="name" type="type" placeholder="placeholder"}}>
Edit
Report