Search code examples
javascriptember.jstodomvc

ember js slight modification on todomvc failure

I'm trying to follow the todomvc tutorial on emberjs getting started documentation to understand it better. In the following stage of the tutorial where we add the editing capability to todo items.

in the following link: http://emberjs.com/guides/getting-started/accepting-edits/

What I did differently from the tutorial is that I turned the todo items into contacts with a title and number. So here is my html addition:

{{edit-contact class="edit" value=title focus-out="acceptChanges" insert-newline="acceptChanges"}}
{{edit-number class="edit" value=number focus-out="acceptChanges" insert-newline="acceptChanges"}}

And here is the addition I made to edit_todo_view.js

Contacts.EditContactView = Ember.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

Contacts.EditNumberView = Ember.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

Ember.Handlebars.helper('edit-contact', Contacts.EditContactView);
Ember.Handlebars.helper('edit-number', Contacts.EditNumberView);

It gives the following error though:

Uncaught TypeError: Cannot read property 'start' of undefined VM2755: line 971

If I discard either the number or the title from the HTML it works fine.

It also works fine if I debug and put a breakpoint in "this.$().focus();" lines mentioned above.

Any assitance would be greatly appreciated

All the best

Solution

  • It's probably related to two elements trying to fight for focus at the same time, then after one wins the other focuses out and calls acceptChanges putting your app in an unexpected state.