javascript - Ember.TextField 绑定(bind)在 Ember RC1 中发生了变化?

标签 javascript ember.js

我正在尝试构建一个最初显示文本的 View 。如果用户双击,它将用输入字段替换该文本。这样用户就可以轻松更新文本(例如使用“contenteditable”属性)。

我有一种方法适用于 Ember pre4,但不适用于 Ember RC1。在 RC1 中,Ember.TextField 不会初始化为父 View 的 value 属性。当您双击标签文本时,它会创建一个空的输入字段。这是两个 fiddle :

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

知道 Ember 内部发生了什么变化吗?谢谢。

这是代码:

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

最佳答案

我找到了一个我根本不喜欢的解决方案。但是,它解决了所描述的问题。

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

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

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

工作 fiddle :http://jsfiddle.net/mattsonic/UUac9/19/

关于javascript - Ember.TextField 绑定(bind)在 Ember RC1 中发生了变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15317011/

相关文章:

javascript - 如何使用 chai.js 测试我的函数是否创建数组?

javascript - 比较两个数组的相交值

Javascript:Mozilla .watch() 功能用于对象的所有属性(可能是跨浏览器)

javascript - Ember 如何从 Controller 上的 html5 视频标签捕获 Action 'ended'?

javascript - Ember Data 在提交时不发送数据

javascript - 限制可以使用文本区域写入的行数

javascript - flask : How to pass JSON to javascript file?

javascript - EmberJS : Unit test class-based helpers

javascript - Ember 应用程序性能

javascript - Ember.js 如何引用 Grunt.js 预编译的 Handlebars 模板?