最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Handling blur on TextField child in ember view - Stack Overflow

programmeradmin7浏览0评论

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 badges
Add a ment  | 

1 Answer 1

Reset to default 7

I 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/

发布评论

评论列表(0)

  1. 暂无评论