title: Ember CLI: custom input helper
body: <p>I'm trying to extend Ember's TextField with UrlField so that if someone forgets to include <code>http://</code>, it does it for them.</p>
  
  <p>Here's my View:</p>
  
  <p>views/input-url.js</p>
  
  <pre><code>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'));
      }
  
  });
  </code></pre>
  
  <p>If I use it in my template like this, it works fine:</p>
  
  <pre><code>{{view "input-url" value=url}}
  </code></pre>
  
  <p>I prefer to use custom view helpers, so I created this (following the guide at the bottom of this page: <a href="http://guides.emberjs.com/v1.11.0/templates/writing-helpers/" rel="noreferrer">http://guides.emberjs.com/v1.11.0/templates/writing-helpers/</a>):</p>
  
  <p>helpers/input-url.js</p>
  
  <pre><code>import Ember from 'ember';
  import InputUrl from '../views/input-url';
  
  export default Ember.Handlebars.makeBoundHelper(InputUrl);
  </code></pre>
  
  <p>Now trying to render this in my template doesn't work:</p>
  
  <pre><code>{{input-url value=url}}
  </code></pre>
  
  <p>I've also tried different permutations of this, including what's shown in the guide <code>Ember.Handlebars.makeBoundHelper('input-url', InputUrl);</code> (which throws an error), but I can't seem to get my input field to show up. What am I doing wrong?</p>