Ember CLI：自定义输入助手 [英] Ember CLI: custom input helper

问题描述

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

I'm trying to extend Ember's TextField with UrlField so that if someone forgets to include http://, it does it for them.

这是我的观点：

views / input-url.js

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

});

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

If I use it in my template like this, it works fine:

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

我更喜欢使用自定义视图助手，所以我创建了这个（在本页底部的指南之后： http://guides.emberjs.com/v1.11.0/templates/writing-helpers/ ）：

I prefer to use custom view helpers, so I created this (following the guide at the bottom of this page: http://guides.emberjs.com/v1.11.0/templates/writing-helpers/):

helpers / input-url.js

helpers/input-url.js

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

export default Ember.Handlebars.makeBoundHelper(InputUrl);

现在尝试在我的模板中渲染这个不起作用：

Now trying to render this in my template doesn't work:

{{input-url value=url}}

我也尝试过不同的排列，包括指南 Ember.Handlebars.makeBoundHelper（'input-url'，InputUrl）; （这引发了一个错误），但我似乎不能让我的输入字段出现。我做错了什么？

I've also tried different permutations of this, including what's shown in the guide Ember.Handlebars.makeBoundHelper('input-url', InputUrl); (which throws an error), but I can't seem to get my input field to show up. What am I doing wrong?

推荐答案

不知道你在做什么你的视图帮手，但是有一个更简单的解决方案：利用Ember.Textfield是一个组件的事实。 http://emberjs.com/api/classes/Ember.TextField.html

Not sure what you are doing wrong with your view helper, but there is a much simpler solution: take advantage of the fact that Ember.Textfield is a component. http://emberjs.com/api/classes/Ember.TextField.html

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

Simply move views/input-url.js to components/input-url.js and get rid of your view helper.

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

这篇关于Ember CLI：自定义输入助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！