Geek Answers Handbook

Ember CLI: user input helper

I am trying to extend Ember TextField with UrlField so that if someone forgot to enable http:// , he does it for them.

Here is my view:

view / login-url.js

 import Ember from 'ember'; export default Ember.TextField.extend({ type: 'url', didInsertElement: function() { this._super.apply(this, arguments); this.formatValue(); }, onValueChange: function() { this.formatValue(); }.observes('value'), formatValue: function() { var pattern = /^https{0,1}:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+/g; if (pattern.test(this.get('value'))) return; if (!pattern.test('http://' + this.get('value'))) return; this.set('value', 'http://' + this.get('value')); } });

If I use it in my template like this, it works fine:

 {{view "input-url" value=url}}

I prefer to use special view helpers, so I created this (following the guide at the bottom of this page: http://guides.emberjs.com/v1.11.0/templates/writing-helpers/ ):

helpers / url.js

 import Ember from 'ember'; import InputUrl from '../views/input-url'; export default Ember.Handlebars.makeBoundHelper(InputUrl);

Now trying to do this in my template does not work:

 {{input-url value=url}}

I also tried various permutations, including what is shown in the Ember.Handlebars.makeBoundHelper('input-url', InputUrl); (which causes an error), but I cannot get my input field to display. What am I doing wrong?

+5
source share
2 answers

Not sure what you are doing wrong with your view helper, but there is a much simpler solution: take advantage of the fact that Ember.Textfield is a component. http://emberjs.com/api/classes/Ember.TextField.html

Just move the views / input -url.js to the components / input -url.js and get rid of your view helper.

Then {{input-url value=url}} should work automatically.

+2
source

If you want to do this with an assistant, you cannot extend Ember.TextField , because extends Ember.Component and is not an assistant to Handlebars.

The way to do this with an assistant will be easier. Since you are using Ember-CLI, you can create a helper called "input-url" with the ember g helper input-url command, and you only need the code you need, this is the code in your formatValue() function:

helpers / url.js

 // define patter globally so it not recreated each time the function is called var pattern = /^https{0,1}:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+/g; export function inputUrl(value) { if (pattern.test(value)) { return value; } if (!pattern.test('http://' + value)) { return value; } return 'http://' + value; }; export default Ember.Handlebars.makeBoundHelper(inputUrl);

And you can use it like:

 {{input-url PASS_YOUR_URL_HERE}}

If the value you pass is the value of the value variable in the helper.

You can also create the component, as suggested by @Gaurav , using the exact code that you have above, only in the / input -url.js components instead and remove the auxiliary reason, because this is optional, you must also edit the corresponding component template. if you want it to display value with one descriptor expression:

templates / components / input-url.hbs

 {{value}}

Use with the component will be:

 {{input-url value=PASS_YOUR_URL_HERE}}
+2
source

More articles: