EmberビューのTextField子のぼかし処理

Question

ember.jsを探索する方法として、100％機能互換バージョンのバックボーンtodoサンプルアプリケーションを再作成しています。エディットモードを終了するにはEmber.TextFieldでblurイベントを処理するにはどうすればいいですか？次のように現在のコードは次のとおりです。

<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イベントが呼び出されるように見えることはありませんと仮定していました。カスタムApp.TextFieldが定義されている理由を

Answer 1

私はソースを見て、私はあなたがミックスインTextSupport https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/text_support.js#L25-28

で定義されてfocusOutイベントを使用しなければならず、focusOutイベントがparentViewまでバブルないと思いますが、thatsの。

ハンドルバー：

<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/