2013-03-09 48 views
1

我试图建立一个视图,最初将显示文本。如果用户双击,它将用输入字段替换该文本。这样用户可以轻松更新文本(如使用“contenteditable”属性)。Ember RC1中的Ember.TextField绑定已更改?

我有一种方法可以在Ember pre4中使用,但不能在Ember RC1中使用。在RC1中,Ember.TextField不会初始化为父视图的value属性。当您双击标签文本时,它会创建一个空的输入字段。这里有两个小提琴:

  1. PRE4(工作):http://jsfiddle.net/mattsonic/cq5yy/5
  2. RC1(相同的代码 - 不工作):http://jsfiddle.net/mattsonic/UUac9/15

任何想法里面灰烬哪些改变呢?谢谢。

下面是代码:

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()); 
} 
}); 

回答

0

我发现,我不喜欢在所有的解决方案。但是,它解决了所述的问题。

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

如果在focusIn事件期间将输入字段的值设置为正确的值,它仍然会失败。但是,如果您将输入字段的值设置为不同的值并将其切换回来,则输入字段将显示为正确的值。

我很想知道更好的方法来解决这个问题。 Ember pre4解决方案比这更优雅。

工作小提琴:http://jsfiddle.net/mattsonic/UUac9/19/