Ember.js - 如果我键入，如何阻止用于编辑的输入栏自动接受更改

Ember.js - How can I stop my input bar for editing from automatically accepting changes if I type

本文关键字：输入 编辑 用于 如果 js 何阻止 Ember      更新时间：2023-09-26

我有一个主动编辑模型名称的输入。问题是，如果我开始在输入中键入，输入会接受更改。

因此，编写一个值为"Something Else"的categoryName（recordCategory的一个属性）将是一件巨大的苦差事，因为我需要在我键入的每个字母之后重新关注edit-recordCategory输入。因此，如果我专注于输入并且我会快速键入"Some"，它会接受"S"，然后再将我从输入中移开，并根据它的当前值在列表中重新调整 recordCategory，这只会是"S"。

下面是我的代码的更详细示例。

{{#each searchResults itemController="recordCategory"}}
    <div id="hoveredRow" {{bind-attr class="isEditing:editing"}}>
      {{#if isEditing}}
          <div class="input-standard">
            {{edit-recordCategory value=categoryName focus-out="acceptChanges"
             insert-newline="acceptChanges"}}
          </div>
      {{else}}
        {{categoryName}}
      {{/if}}
    </div>
{{/each}}

这是我的控制器

isEditing: false,
  actions: {
    editrecordCategory: function(recordCategory){
        this.set('isEditing', true);
        console.log(this.get('isEditing is toggling'))
    },
    acceptChanges: function() {
      this.set('isEditing', false);
      if (Ember.isEmpty(this.get('model.categoryName'))) {
        this.send('removerecordCategory');
      } else {
        this.get('model').save();
      }
      console.log(this.get('isEditing'))
    },
  }

然后是定义edit-recordCategory的视图 

VpcYeoman.EditRecordCategoryView = Ember.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});
Ember.Handlebars.helper('edit-recordCategory', VpcYeoman.EditRecordCategoryView);

编辑：

在实现GJK版本的"接受更改"操作后。我收到了同样的问题。

测试 1

我注释掉了acceptChanges操作以及它的两个引用，{{edit-recordCategory value=categoryName focus-out="acceptChanges" insert-newline="acceptChanges"}}使其{{edit-recordCategory value=categoryName}}。同样的问题仍在发生。这让我相信问题不在于接受的编写方式。

有一点，我最初的"接受更改"操作及其在 

{{edit-recordCategory value=categoryName focus-out="acceptChanges"
             insert-newline="acceptChanges"}}

工作完美。

测试 2

除了删除任何对"acceptChanges"的引用之外，我还删除了{{#if 编辑}}条件。这 

{{edit-recordCategory value=categoryName focus-out="acceptChanges"
             insert-newline="acceptChanges"}}

打字后并没有消失（正如预期的那样，没有余烬条件，但当我打字时{{edit-recordCategory}}仍然自动提交。还应该注意的是，这个 recordCategory 列表会自行排序，因此在接受编辑时，我专注于{{edit-recordCategory}}并且对象会根据它的新 categoryName 值自行调整

发现问题！但它打破了我的过滤器栏。

一旦我注释掉了这个函数

searchResults: function() {
    var searchTerm = this.get('searchTerm');
    var regExp = new RegExp(searchTerm,'i');
    // We use `this.filter` because the contents of `this` is an array of objects
    var filteredResults = this.filter(function(category) {
        return regExp.test(category.get('categoryName'));
    });
    return filteredResults;
}.property('@each.categoryName', 'searchTerm'),

并将"搜索结果"从{{#each searchResults itemController="recordCategory"}}中取出，编辑工作顺利，但现在我的搜索栏过滤器不起作用。

您的 categoryName 属性位于模型上，这意味着您可以在控制器中重写它。您需要使用控制器上的临时属性来解决问题。

recordCategory: '',
actions: {
    acceptChanges: function() {
        var recordCategory = this.get('recordCategory');
        this.set('model.recordCategory', recordCategory);
    }
}
相关文章：