Ember.js Ember CLI：自定义输入帮助程序

我试图用UrlField扩展Ember的TextField，这样如果有人忘记包含

http://

，它就会为他们这样做

以下是我的看法：

视图/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'));
    }

});

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

export default Ember.Handlebars.makeBoundHelper(InputUrl);

如果我像这样在模板中使用它，它可以正常工作：

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

我更喜欢使用自定义视图帮助程序，因此我创建了此帮助程序（遵循本页底部的指南：）：

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

});

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

export default Ember.Handlebars.makeBoundHelper(InputUrl);

现在尝试在我的模板中呈现此内容无效：

{{input-url value=url}}

---

我还尝试了不同的排列方式，包括指南

Ember.handlebar.makeBoundHelper（'input-url'，InputUrl）中所示的内容（抛出错误），但我似乎无法显示输入字段。我做错了什么？
不确定您的视图助手做错了什么，但有一个更简单的解决方案：利用Ember.Textfield是一个组件这一事实

只需将views/input-url.js移动到components/input-url.js，就可以摆脱视图助手

然后，
{{input url value=url}}
应该会自动工作。
如果您想使用帮助器执行此操作，您不能扩展，因为它是扩展的，并且不是把手帮助器

使用助手实现这一点的方法实际上更简单。由于您使用的是Ember CLI，因此可以使用命令
Ember g helper input url
创建一个名为“input url”的帮助程序，您只需要
formatValue（）函数中的代码即可：

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

});

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

export default Ember.Handlebars.makeBoundHelper(InputUrl);

你可以像这样使用它：

{{input-url PASS_YOUR_URL_HERE}}

其中，您传递的值将是辅助对象中
值
变量的值

您还可以按照@Gaurav的建议，使用上面的代码创建一个组件，只需在components/input-url.js中创建，并删除帮助器，因为不再需要它。如果要使用单个把手表达式显示
值
，还必须编辑组件的相应模板：

模板/组件/input-url.hbs

组件的用途如下：

{{input-url value=PASS_YOUR_URL_HERE}}