ember.js - started - ember startup

Ember CLI: ayuda de entrada personalizada

Question

Estoy tratando de extender Ember''s TextField con UrlField para que si alguien olvida incluir http:// , lo haga por ellos.

Aquí está mi vista:

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

});

Si lo uso en mi plantilla de esta manera, funciona bien:

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

Prefiero usar ayudantes de visualización personalizados, así que creé esto (siguiendo la guía en la parte inferior de esta página: http://guides.emberjs.com/v1.11.0/templates/writing-helpers/ ):

helpers / input-url.js

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

export default Ember.Handlebars.makeBoundHelper(InputUrl);

Ahora intentar hacer esto en mi plantilla no funciona:

{{input-url value=url}}

También he probado diferentes permutaciones de esto, incluyendo lo que se muestra en la guía Ember.Handlebars.makeBoundHelper(''input-url'', InputUrl); (lo que arroja un error), pero parece que no puedo mostrar mi campo de entrada. ¿Qué estoy haciendo mal?

Answer 1

No estoy seguro de lo que está haciendo mal con su asistente de visualización, pero hay una solución mucho más simple: aproveche el hecho de que Ember.Textfield es un componente. http://emberjs.com/api/classes/Ember.TextField.html

Simplemente mueva views / input-url.js a components / input-url.js y elimine su view helper.

Entonces {{input-url value=url}} debería funcionar automáticamente.

Answer 2

Si quieres hacer esto usando un helper, no puedes extender Ember.TextField porque extiende Ember.Component y no es un ayudante de Handlebars.

La forma de hacer esto con un ayudante sería en realidad más simple. Como está utilizando Ember-CLI, puede crear un ayudante llamado "url de entrada" con el comando ember g helper input-url y el único código que necesitaría es el código dentro de su función formatValue() :

helpers / 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);

Y puedes usarlo como:

{{input-url PASS_YOUR_URL_HERE}}

Donde el valor que pase será el valor de la variable de value dentro del helper.

También podría crear un componente, como sugería @Gaurav , usando el código exacto que tiene arriba, solo en components / input-url.js en su lugar y elimine el helper porque ya no es necesario. También debe editar la plantilla correspondiente del componente si desea que muestre el value con una sola expresión de manubrios:

plantillas / componentes / input-url.hbs

{{value}}

El uso con un componente sería:

{{input-url value=PASS_YOUR_URL_HERE}}