Extend TextField with label

Question

I would like to write something like this:

{{ view MyApp.MyTextField label="Your name" valueBinding="person.fullname" }} 

and print this: <div><label>Your name</label><input type="text" /></div> , where the TextField, of course, is bound to person.fullname. I plan to do some validation in this view later.

How to do it in Ember?

Answer 1

I think you need to create your own view like this:

 App.FieldView = Ember.View.extend({ classNames: 'field clearfix'.w(), defaultTemplate: Ember.Handlebars.compile('<div>{{view LabelView}}{{view DataView}}</div>'), label: '', /** * Class representing the label tag */ LabelView: Ember.View.extend({ tagName: 'label', attributeBindings: ['for'], 'for': '', textBinding: 'parentView.label', defaultTemplate: Ember.Handlebars.compile('{{text}}') }), /** * Class representing the data capture control. */ DataView: null, /** * Set the 'for' attribute for the label to that of the data view */ willInsertElement: function() { this._super(); var childViews = this.get('childViews'); var labelView = childViews[0]; var dataView = childViews[1]; labelView.set('for', dataView.$().attr('id')); } }); 

Then you can use it for a text field

 MyApp.MyField= MyApp.FieldView.extend({ label: 'Label Text', DataView : Ember.TextField.extend({ valueBinding: 'MyApp.pageController.myFieldData' }) }); 

or how is it for the dropdown

 MyApp.MyField= MyApp.FieldView.extend({ label: 'Label Text', DataView : Ember.Select.extend({ ... }) }); 

Hope this helps.