CODEWITHSUNDEEP
ember.js
ianpetzer
ianpetzer

Reputation: 1838

Re-usable components/views for EmberJS

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.

Upvotes: 3

Views: 999

Answers (3)

TommyKey
TommyKey

Reputation: 568

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.

Upvotes: 1

Venkata Suresh C
Venkata Suresh C

Reputation: 81

Template expressions and their behavior

  • {{view.name}} will pick values from view
  • {{controller.name}} will pick values from controller
  • {{name}} will pick values from view's context

So, please go with the first option to bind view properties

Updated fiddle - http://jsfiddle.net/VenkataSuresh/3WWaK/2/

Upvotes: 1

David Monagle
David Monagle

Reputation: 1801

If you looking at creating bootstrap fields with Ember, the best way to go about it that I have found so far is Ember Bootstrap

Although it's not really well documented, I found it pretty straightforward to use and you'll save yourself a lot of time as it's pretty well implemented. I find the code pretty concise and you learn a lot about Ember if you take the time to look at how it works.

To answer your question more specifically, if you insert an Ember view as you have shown above, the view object will be able to access this.get('value') and this.get('label'). It does not matter one is a literal and one is a binding. Part of the elegance of Ember is that it deals with this for you.

Upvotes: 0

Related Questions