Javascript Ember.js-如果我键入，如何停止编辑输入栏自动接受更改

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

因此，编写一个categoryName（recordCategory的一个属性）值为“其他东西”将是一项艰巨的任务，因为我需要在键入每个字母后重新关注编辑recordCategory输入。因此，如果我将注意力集中在输入上，并快速键入“Some”，它将接受“S”，然后将我从输入中分离出来，并根据其当前值（仅为“S”）在列表中使用recordCategory

下面是一个更详细的代码示例

{{#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}}

然后是定义

edit recordCategory

VpcYeoman.EditRecordCategoryView = Ember.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

Ember.Handlebars.helper('edit-recordCategory', VpcYeoman.EditRecordCategoryView);

编辑：

在执行GJK版本的“acceptChanges”操作后。我也遇到了同样的问题

测试1

我在

{edit recordCategory value=categoryName focus out=“acceptChanges”insert newline=“acceptChanges”}

中注释掉了acceptChanges操作和它的两个引用，使得它只是

{edit recordCategory value=categoryName}

。同样的问题仍在发生。这让我相信问题不在于修改的方式

我最初的“acceptChanges”操作及其在

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

工作得很好

测试2

在去掉“acceptChanges”的任何引用之后，我删除了{{{if Editing}}条件。

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

没有在键入时消失（正如预期的那样，没有余烬条件，但是当我键入时，

{{edit recordCategory}}

仍然自动提交。还应该注意的是，这个recordCategories列表会自行排序，因此在接受编辑后，我的注意力就从

{edit recordcategority}中转移出来了）

并且对象根据其新的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”}中提取“searchResults”

编辑工作顺利，但现在我的搜索栏过滤器不工作。

您的

categoryName

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

recordCategory: '',

actions: {
    acceptChanges: function() {
        var recordCategory = this.get('recordCategory');
        this.set('model.recordCategory', recordCategory);
    }
}

---

我仍然有相同的问题，但我不认为这是因为您的解决方案无效。在看到相同的问题后，我在{{edit recordCategory value=categoryName focus out=“acceptChanges”insert newline=“acceptChanges”}中注释掉了acceptChanges操作及其两个引用，使其仅{{edit recordCategory value=categoryName}。同样的问题仍在发生。我将更新该问题。为了澄清，您的问题是模型上的

categoryName

属性会在您键入时更新，而不是仅在您调用

acceptChanges

时才更新，对吗？是的。它会根据我按的键自动提交categoryName。因此编写categoryNa如果我的值是“其他东西”，那将是一件非常麻烦的事情，因为我需要在键入每个字母后重新关注编辑recordCategory输入。因此，如果我专注于输入，我会快速键入“一些”，它将接受“S”，然后将我从输入中解聚，并根据其当前值重新调用列表中的recordCategory，该值将仅为“S”。我想我现在明白了。尝试使用普通的

输入
帮助程序，而不是自定义的
文本视图
。我认为您的
焦点（）
call可能会伤害您。如果这样做有效，我们可以从那里开始。您的意思是{{{input class=“edit xxsml margin top”value=categoryName focus out=“acceptChanges”insert newline=“acceptChanges”}？同样的问题仍然在发生，尽管现在它没有自动聚焦到输入栏上。我的一部分人认为这可能是categoryName保存方式的错误。在它崩溃之前，更改只保存在本地，但在我们将其连接到云数据库后的一段时间，这个问题开始出现。
recordCategory: '',

actions: {
    acceptChanges: function() {
        var recordCategory = this.get('recordCategory');
        this.set('model.recordCategory', recordCategory);
    }
}