Ember CLI: custom input helper

Question

Я пытаюсь расширить TextField Ember с помощью UrlField, чтобы, если кто-то забыл включить http://, он делает это для них.

Вот мой Вид:

просмотров/вход-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')); 
    } 

}); 

Если я использую его в шаблоне, как это, она отлично работает:

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

Я предпочитаю используйте специальные помощники вида, поэтому я создал это (следуя руководству внизу этой страницы: http://guides.emberjs.com/v1.11.0/templates/writing-helpers/):

хелперы/вход-url.js

import Ember from 'ember'; 
import InputUrl from '../views/input-url'; 

export default Ember.Handlebars.makeBoundHelper(InputUrl); 

Теперь пытаюсь сделать это в моем шаблоне не работает:

{{input-url value=url}} 

Я также пробовал различные перестановки этого, в том числе и то, что показано в руководство Ember.Handlebars.makeBoundHelper('input-url', InputUrl); (которое вызывает ошибку), но я не могу заставить мое поле ввода отображаться. Что я делаю не так?

Answer 1

Не уверен, что вы делаете неправильно с помощью своего помощника вида, но есть гораздо более простое решение: воспользуйтесь тем, что Ember.Textfield является компонентом. http://emberjs.com/api/classes/Ember.TextField.html

Просто переместите представления/input-url.js в компоненты/input-url.js и избавьтесь от своего помощника.

Тогда {{input-url value=url}} должен работать автоматически.

Answer 2

Если вы хотите сделать это с помощью помощника, вы не сможете продлить Ember.TextField, потому что он расширяет Ember.Component и не является помощником Handlebars.

Способ сделать это с помощью помощника будет проще. Так как вы используете Ember-CLI, вы можете создать помощник под названием «вход-URL» с командой ember g helper input-url и единственным кодом, который вы должны были бы это код внутри вашей formatValue() функции:

хелпер/вход для URL .js

// define patter globally so it's 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); 

И вы можете использовать его как:

{{input-url PASS_YOUR_URL_HERE}} 

Если значение вы передаете будет значение value переменная внутри помощника.

Вы также можете создать компонент, так как @Gaurav предложил, используя точный код, который вы имеете выше, только в компонентов/ввода-url.js вместо и удалить помощника потому что больше нет необходимости. Вы также должны отредактировать соответствующий шаблон компонента, если хотите, чтобы он отображал value с одним выражением руля:

шаблоны/компоненты/input-url.HBS

{{value}} 

Использование с компонентом будет:

{{input-url value=PASS_YOUR_URL_HERE}}