Question

I’m trying to create a re-usable component or view for creating my labels and text inputs wrapped up in a Bootstrap control group. The component would need to create something like this:

<div class="control-group">
  <label class="control-label" for="approachInputId">ApproachLabel</label>
  <div class="controls">
    {{view Ember.TextField valueBinding='approach'}}
  </div>
</div>

That I can call using code along the lines of:

{{view App.TextFieldWithLabel valueBinding='approach' label='ApproachLabel'}} 

There is a similar question on Stack Overflow: Using Ember.js text field ids for a <label> tag

Where one of the answers includes a link to this jsFiddle. http://jsfiddle.net/GtsKK/2/

This is almost what I’m looking for but I’d like to understand how to pass the label and valueBinding through when I insert the view {{view App.TextFieldWithLabel}} instead of declaring them in a JS object array.

Any help would be appreciated.

EDIT: 29 Jan 2013

I have created another JSFiddle at http://jsfiddle.net/ianpetzer/3WWaK/ which clearly shows what I’m trying to achieve. I can’t seem to get the variable value to be passed through from the point where I insert the view into the template.

Answer 1

I have composed a little fiddle for you here http://jsfiddle.net/Energiz0r/sbnwb/3/
where I have followed your above API:

{{view App.TextFieldWithLabel valueBinding='approach' label='ApproachLabel'}} 

Hope this is what you looked for.