How do I create a reusable partial for duplicate markup in ember.js?
ember.js, partial-views, reusability
Solution
I would create a view that takes all the parameters that are variable. Such as:
{{view App.FormEntity
name="email"
placeholder="My placeholder..."
help="We just need a valid email address."
valueBinding="value"
}}
From there you could extract the label, the various class names, and then use `Ember.TextField` to bind the value to.
Once you have all of those arguments passed into the view, it should be nice and easy to create the markup using a mixture of `bindAttr`s, a couple of computed properties, and Ember helpers (such as the `Ember.TextField`).
Problem
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"}}> ```