处理在余烬视图中TextField子字段的模糊

Handling blur on TextField child in ember view

本文关键字：字段 模糊 TextField 余烬 视图 处理      更新时间：2023-09-26

作为一种探索ember.js的方式，我正在用100%功能兼容的版本重新创建骨干todo示例应用程序。我遇到的第一个症结是在双击编辑创建的待办事项后，我如何处理灰烬上的模糊事件。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定义的输入元素的blur事件。TextField会冒泡到我的视图，但我的视图上的模糊处理程序似乎从未被调用。

我看了源码，我认为你必须使用在TextSupport mixin中定义的focusOut事件https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/controls/text_support.js#L25-28

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

相关文章：