Ember.TextField binding changed in Ember RC1?

Question

I'm trying to build a view that will initially display text. If the user double-clicks, it will replace that text with an input field. This way the user can easily update the text (like using the "contenteditable" attribute).

I have an approach that works in Ember pre4, but not in Ember RC1. In RC1, the Ember.TextField does not initialize to the parent view's value property. When you double-click the label text, it creates an empty input field. Here are two fiddles:

Pre4 (working): http://jsfiddle.net/mattsonic/cq5yy/5
RC1 (same code - not working): http://jsfiddle.net/mattsonic/UUac9/15

Any idea what changed inside Ember? Thanks.

Here is the code:

App.InputView = Ember.TextField.extend({
classNames: ["input-small"],
valueBinding: "parentView.value",
didInsertElement: function () {
    this.$().focus()
},
focusOut: function () {
    parent = this.get("parentView");
    parent.setLabelView();
}
});

App.LabelView = Ember.View.extend({
tagName: "span",
template: Ember.Handlebars.compile("{{view.value}}"),
valueBinding: "parentView.value",
doubleClick: function () {
    parent = this.get("parentView");
    parent.setInputView();
}
});

App.LabelEditView = Ember.ContainerView.extend({
tagName: "span",
labelView: App.LabelView.extend(),
inputView: App.InputView.extend(),
didInsertElement: function () {
    this.setLabelView();
},
setInputView: function () {
    this.set("currentView", this.get("inputView").create());
},
setLabelView: function () {
    this.set("currentView", this.get("labelView").create());
}
});

Matt Sonic Matt Sonic · Accepted Answer · 2013-03-10T18:40:55

I found a solution that I don't like at all. But, it solves the problem as described.

focusIn: function() {
    var val = this.get("parentView.value");
    this.set("value", "");
    this.set("value", val);
},

If you set the input field's value to the correct value during the focusIn event, it still fails. But, if you set the input field's value to a different value and then switch it back, the input field will appear with the correct value.

I would love to know a better way to solve this problem. The Ember pre4 solution is more much elegant than this.

Working fiddle: http://jsfiddle.net/mattsonic/UUac9/19/

Ember.TextField binding changed in Ember RC1?

1 Answers