admin管理员组文章数量:1332704
As a way to explore ember.js I am recreating the backbone todo example app with a 100% feature patible version. The first sticking point I've run into is after double-clicking to edit a created todo, how do I handle the blur event on the Ember.TextField to exit edit mode. Current code is as follows:
<script type="text/x-handlebars" data-template-name="todo-list-template">
<ul>
{{#each App.TodosController.todos}}
{{#view App.TodoView tagName="li" contentBinding="this"}}
{{#if editMode}}
{{view Ember.TextField valueBinding="content.text"}}
{{else}}
{{content.text}}
{{/if}}
{{/view}}
{{/each}}
</ul>
</script>
App.TodoView = Ember.View.extend({
editMode: false,
doubleClick: function(evt){
this.set('editMode', true);
},
blur: function(evt){
this.set('editMode', false);
}
});
I had assumed that the blur event from the input element defined by the Ember.TextField would bubble up to my view, but the blur handler on my view never seems to get called.
As a way to explore ember.js I am recreating the backbone todo example app with a 100% feature patible version. The first sticking point I've run into is after double-clicking to edit a created todo, how do I handle the blur event on the Ember.TextField to exit edit mode. Current code is as follows:
<script type="text/x-handlebars" data-template-name="todo-list-template">
<ul>
{{#each App.TodosController.todos}}
{{#view App.TodoView tagName="li" contentBinding="this"}}
{{#if editMode}}
{{view Ember.TextField valueBinding="content.text"}}
{{else}}
{{content.text}}
{{/if}}
{{/view}}
{{/each}}
</ul>
</script>
App.TodoView = Ember.View.extend({
editMode: false,
doubleClick: function(evt){
this.set('editMode', true);
},
blur: function(evt){
this.set('editMode', false);
}
});
I had assumed that the blur event from the input element defined by the Ember.TextField would bubble up to my view, but the blur handler on my view never seems to get called.
Share Improve this question asked Dec 27, 2011 at 15:21 user1117841user1117841 131 silver badge3 bronze badges1 Answer
Reset to default 7I looked at the sources and I think you have to use the focusOut
event defined in TextSupport mixin https://github./emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/text_support.js#L25-28
And the focusOut
event doesn't bubble up to the parentView
, thats why a custom App.TextField
is defined.
Handlebars:
<script type="text/x-handlebars">
<ul>
{{#each App.TodosController.todos}}
{{#view App.TodoView tagName="li" contentBinding="this"}}
{{#if view.editMode}}
{{view App.TextField editModeBinding="view.editMode" valueBinding="view.content.text"}}
{{else}}
{{view.content.text}}
{{/if}}
{{/view}}
{{/each}}
</ul>
</script>
JS:
App.TextField = Ember.TextField.extend({
didInsertElement: function(){
this.$().focus();
},
focusOut: function(evt) {
this.set('editMode', false);
}
});
App.TodoView = Ember.View.extend({
editMode: false,
doubleClick: function(evt) {
this.set('editMode', true);
}
});
See working example at http://jsfiddle/cvWWe/34/
本文标签: javascriptHandling blur on TextField child in ember viewStack Overflow
版权声明:本文标题:javascript - Handling blur on TextField child in ember view - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742238369a2438492.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论