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

admin管理员组

文章数量:1334382

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.

• javascript
• ember.js

Share Improve this question Follow asked Dec 27, 2011 at 15:21 user1117841user1117841 1311 silver badge33 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: 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/

本文标签： javascriptHandling blur on TextField child in ember viewStack Overflow