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

1 Answer 1

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/