javascript - Ember 在组件内执行错误/多个操作

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>

现在我想添加使用回车键添加项目的可能性，而不必单击“添加”按钮，所以我添加了 action="add"到输入助手，它将触发 add -按下return时的 Action 。但是，如果有任何可用项目，它也会调用 remove - 在添加新项目之前对第一个项目执行操作。 Add -按钮仍然可以正常工作。

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

这是 fiddle :http://emberjs.jsbin.com/nadeputa/1/edit

这似乎和我有包装有关<form> -element，如果我删除它，它只会执行 add - 采取应有的行动。然而，我使用 Bootstrap 来设计我的应用程序，因此我无法真正摆脱表单而不弄乱一切。

谁能解释为什么会发生这种情况以及我该如何解决它？

Answer 1

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

请参阅Implicit Submission HTML 规范的一部分，具体来说:

在文本字段聚焦时按下“enter”键会隐式提交表单)，然后对于默认按钮具有定义的激活行为的表单执行此操作必须导致用户代理运行合成单击激活步骤该默认按钮。