Ember CLI: benutzerdefinierte Eingabe-Helper

Question

Ich versuche, Ember's TextField mit UrlField zu erweitern, so dass, wenn jemand vergisst, http:// einzuschließen, es für sie tut.

Hier ist meine Ansicht:

views/Eingabe-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')); 
    } 

}); 

Wenn ich es in meiner Vorlage wie folgt verwenden, funktioniert es gut:

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

Ich bevorzuge Verwenden Sie benutzerdefinierte Ansicht Helfer, so dass ich dies erstellt (nach der Anleitung am Ende dieser Seite: http://guides.emberjs.com/v1.11.0/templates/writing-helpers/):

Helfer/input-url.js

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

export default Ember.Handlebars.makeBoundHelper(InputUrl); 

versuchen nun, dies in meiner Vorlage zu machen funktioniert nicht:

{{input-url value=url}} 

Ich habe auch versucht, verschiedene Permutationen von diesen, einschließlich dessen, was in der gezeigt hat Anleitung Ember.Handlebars.makeBoundHelper('input-url', InputUrl); (die einen Fehler wirft), aber ich kann nicht scheinen, mein Eingabefeld zu zeigen. Was mache ich falsch?

Answer 1

Nicht sicher, was Sie falsch mit Ihrem View Helper tun, aber es gibt eine viel einfachere Lösung: Nutzen Sie die Tatsache, dass Ember.Textfield eine Komponente ist. http://emberjs.com/api/classes/Ember.TextField.html

Verschieben Sie einfach views/input-url.js zu Komponenten/input-url.js und entfernen Sie Ihren View-Helfer.

Dann sollte {{input-url value=url}} automatisch funktionieren.

Answer 2

Wenn Sie dies mit einem Helfer tun möchten, können Sie nicht erweitern Ember.TextField, da erweitert Ember.Component und ist kein Lenker Helfer.

Der Weg, dies mit einem Helfer zu tun, wäre eigentlich einfacher. Da Sie Ember-CLI verwenden, können Sie einen Helfer „input-url“ mit dem Befehl ember g helper input-url und der einzige Code aufgerufen schaffen müssten Sie den Code in Ihrer formatValue() Funktion:

Helfer/input-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); 

Und Sie können es gerne verwenden:

{{input-url PASS_YOUR_URL_HERE}} 

Wenn der Wert, den Sie der Wert deswird passierenVariable innerhalb des Helfers.

Sie können auch eine Komponente erstellen, wie @Gaurav vorgeschlagen, den genauen Code verwenden Sie oben haben, nur in Komponenten/Input-url.js statt und die Helfer löschen weil es nicht mehr notwendig ist. Sie müssen auch die entsprechende Vorlage der Komponente bearbeiten, wenn sie den value mit einem einzelnen Lenkerausdruck anzeigen soll:

templates/components/input-url.hbs

{{value}} 

Die Verwendung mit einer Komponente wäre:

{{input-url value=PASS_YOUR_URL_HERE}}