ember.js - Ember CLI : custom input helper

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}}

我更喜欢使用自定义 View 助手，所以我创建了这个(按照本页底部的指南: http://guides.emberjs.com/v1.11.0/templates/writing-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

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

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

然后{{input-url value=url}}应该自动工作。