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

Question

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

因此，编写一个值为“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 版本的“acceptChanges”操作之后。我收到了同样的问题。

测试 1

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

有一点是我最初的“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"}}

在输入时没有消失（正如预期的那样，没有 ember 条件，但{{edit-recordCategory}} 在我输入时仍会自动提交。还应注意，此 recordCategories 列表会自行排序，因此在接受编辑后，我'我专注于 {{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"}} 中取出“searchResults”进行编辑工作顺利，但现在我的搜索栏过滤器无法正常工作。

Answer 1

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

recordCategory: '',

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