我正在尝试使用 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'));
}
});
如果我像这样在我的模板中使用它,它工作得很好:
{{view "input-url" value=url}}
我更喜欢使用自定义视图助手,因此我创建了这个(遵循本页底部的指南:http://guides.emberjs.com/v1.11.0/templates/writing-helpers/ 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);
(这会引发错误),但我似乎无法显示我的输入字段。我究竟做错了什么?
不确定你的视图助手做错了什么,但有一个更简单的解决方案:利用 Ember.Textfield 是一个组件的事实。http://emberjs.com/api/classes/Ember.TextField.html http://emberjs.com/api/classes/Ember.TextField.html
只需将views/input-url.js 移至components/input-url.js 并删除视图助手即可。
Then {{input-url value=url}}
应该自动工作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)