Clever Geek Handbook

Reusable Components / Views for EmberJS

I am trying to create a reusable component or view to create my labels and text inputs, wrapped in a Bootstrap cgroup. The component will 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>

What can I call with code in lines:

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

There is a similar question on Stack Overflow: Using Ember.js textbox IDs for the <label> tag

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

This is almost what I'm looking for, but I would like to understand how to pass the label and valueBinding when I insert the view {{view App.TextFieldWithLabel}}

instead of declaring them into an array of JS objects.

Any help would be appreciated.

EDIT: Jan 29, 2013

I've created another JSFiddle at http://jsfiddle.net/ianpetzer/3WWaK/ which clearly shows what I'm trying to achieve. I can't seem to pass the value of the variable from the point where I insert the view into the template.

+3


source to share


3 answers


I wrote a little fiddle for you http://jsfiddle.net/Energiz0r/sbnwb/3/ where I followed your API:

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


Hope this is what you were looking for.

+1


source


Template expressions and their behavior

  • {{view.name}}

    will fetch values ​​from view
  • {{controller.name}}

    will fetch values ​​from the controller
  • {{name}}

    will fetch values ​​from the view context


So go to the first option for binding view properties

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

+1


source


If you are looking for creating boot fields with Ember, the best way to do it that I have found so far is Ember Bootstrap

While not well documented, I found it pretty easy to use and you will save yourself a lot of time as it is implemented quite well. I find the code pretty short and you will learn a lot about Ember if you have the time to see how it works.

To answer your question more precisely, if you embed an Ember view as you showed above, the view object will have access to this.get('value')

and this.get('label')

. It doesn't matter if it's literal, but one is required. Part of the elegance of Ember is that it deals with this for you.

0


source






More articles:


All Articles