Ember보기의 TextField 자식 흐림 처리

Question

ember.js를 탐색하는 방법으로 100 % 기능 호환 버전으로 백본 todo 예제 응용 프로그램을 다시 만들고 있습니다. 내가 실행 한 첫 번째 문제점은 생성 된 할 일을 편집하기 위해 더블 클릭 한 후, Ember.TextField에서 blur 이벤트를 처리하여 편집 모드를 종료하는 방법입니다. 다음과 같이 현재 코드는 다음과 같습니다 나는 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); 
    } 
}); 

. 사용자 정의 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까지 거품을하지 않는 생각 이잖아.

핸들 바 :

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