Question

我正在尝试使用UrlField扩展Ember的TextField，以便在有人忘记包含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

只需将views / input-url.js移动到components / input-url.js并摆脱视图助手。

然后{{input-url value=url}}应自动生效。

Answer 2

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

使用帮助程序执行此操作的方法实际上更简单。由于您使用的是Ember-CLI，您可以使用命令ember g helper input-url创建一个名为“input-url”的帮助程序，您需要的唯一代码就是{{1}中的代码功能：

助手/输入url.js

formatValue()

您可以像以下一样使用它：

// 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}}变量的值。

你也可以使用上面的确切代码创建一个组件，如 @Gaurav 所示，只需在 components / input-url.js 中删除帮手因为没有必要了。如果要使用单个把手表达式显示value，还必须编辑组件的相应模板：

模板/组件/输入 - url.hbs

value

组件的用法是：

{{value}}

Ember CLI：自定义输入助手

2 个答案: