在ember视图中处理TextField子项的模糊

Question

作为探索ember.js的一种方法，我重新创建了具有100％功能兼容版本的主干todo示例应用程序。我遇到的第一个问题是双击编辑创建的待办事项后，如何处理Ember.TextField上的模糊事件以退出编辑模式。当前的代码如下：

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

我曾以为，从由Ember.TextField定义的输入元素的blur事件会冒泡，以我的观点，但在我看来，模糊处理程序似乎永远不会被调用。

Answer 1

我看着来源，我认为你必须使用TextSupport混入https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/text_support.js#L25-28

定义的focusOut事件和focusOut事件不能上升到parentView，这就是为什么自定义App.TextField定义。

把手：

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

在http://jsfiddle.net/cvWWe/34/