Question

我在Ember中编写了一个小型数组编辑器作为组件，它工作正常。

App.ArrayEditorComponent = Ember.Component.extend({
  actions: {
    add: function() {
      var value = this.get('inputValue');
      if(!value) {
        return;
      }
      var items = this.get('items');
      if(!items.contains(value)) {
        items.pushObject(value);
        this.set('inputValue', '');
      }
    },
    remove: function(item) {
      var items = this.get('items');
      items.removeObject(item);
    }
  }
});

下面的模板已经被清除了类check the fiddle以获得确切的标记。

<div>
  <label {{bind-attr for="view.inputField.elementId"}}>{{label}}</label>
  <div>
    <div>
      {{input viewName="inputField" valueBinding="inputValue" placeholderBinding="placeholder" class="form-control" action="add"}}
      <span>
        <button type="button" {{action add}}>Add</button>
      </span>
    </div>

    <ul>
      {{#each item in items}}
      <li>
        <button {{action remove item}}>Remove</button>
        {{item}}
      </li>
      {{/each}}
    </ul>
  </div>
</div>

现在我想添加使用enter-key添加项目的可能性，而不必单击＆＃34; Add＆＃34; -button，所以我将action="add"添加到input-helper，它将按add时触发return - 操作。但是，如果有任何可用项目，它还会在添加新项目之前调用第一项上的remove - 操作。 Add - 按钮仍然可以正常工作。

我也试过enter="add"，但结果相同。

这是小提琴：http://emberjs.jsbin.com/nadeputa/1/edit

似乎与我有一个包装<form> - 元素有关，如果我删除它只是执行add - 动作应该。然而，我使用Bootstrap来设计我的应用程序样式，这样我就无法在不弄乱所有内容的情况下摆脱这种形式。

有人能够解释为什么会这样，以及我如何解决它？

Answer 1

当你点击Enter输入字段操作时，第一个列表项的按钮是triggert，但我不知道原因。

但我可以给你一个解决方法：

将您的button代码更改为div代码
从输入字段中删除操作
将form标记放入组件
将以下操作添加到您的开始form代码：{{action 'submit' on='submit'}}
向您的操作对象添加新操作submit

submit操作应如下所示：

submit: function () {
    this.trigger('add');
}

这是你修改过的jsbin：

http://emberjs.jsbin.com/nadeputa/5/edit

Answer 2

这不是Ember特有的。在表单中的文本字段上按Enter键会导致同一表单中的默认按钮的行为就像单击它一样。

请参阅HTML规范的Implicit Submission部分，具体为：

hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

Ember在组件中执行错误/多个操作

2 个答案: