Ember CLI：自定义输入助手

Question

我正在尝试使用 UrlField 扩展 Ember 的 TextField，以便如果有人忘记包含 http://，它会为他们完成。

这是我的观点：

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

});

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

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

我更喜欢使用自定义视图助手，所以我创建了这个（遵循本页底部的指南：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);

现在尝试在我的模板中呈现它不起作用：

{{input-url value=url}}

我也尝试过不同的排列组合，包括指南 Ember.Handlebars.makeBoundHelper('input-url', InputUrl); 中显示的内容（会引发错误），但我似乎无法显示我的输入字段。我做错了什么？

Answer 1

不确定您的视图助手有什么问题，但有一个更简单的解决方案：利用 Ember.Textfield 是一个组件这一事实。 http://emberjs.com/api/classes/Ember.TextField.html

只需将 views/input-url.js 移动到 components/input-url.js 并删除您的视图助手。

那么 {{input-url value=url}} 应该会自动工作。

Answer 2

如果您想使用帮助程序执行此操作，则不能扩展 Ember.TextField because extends Ember.Component 并且不是 Handlebars 帮助程序。

使用帮助程序执行此操作的方法实际上会更简单。由于您使用的是 Ember-CLI，因此您可以使用命令 ember g helper input-url 创建一个名为 "input-url" 的助手，您唯一需要的代码是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);

您可以像这样使用它：

{{input-url PASS_YOUR_URL_HERE}}

您传递的值将是助手中 value 变量的值。

您也可以创建一个组件，正如 @Gaurav 所建议的那样，使用上面的确切代码，就在 components/input-url.js 而不是删除助手，因为它不再需要了。如果您希望它显示带有单个车把表达式的 value，您还必须编辑组件的相应模板：

模板/components/input-url.hbs

{{value}}

组件的用法为：

{{input-url value=PASS_YOUR_URL_HERE}}

Ember CLI：自定义输入助手

Ember CLI: custom input helper

ember.js

ember-cli