用户点击Enter键时Ember刷新页面上的输入

Question

我使用Ember CLI并注意到奇怪的行为。当用户点击输入并按下回车键时，页面刷新。

我的页面有这样一个基本的元素是不是任何形式的一部分：

<input type="text" class="form-control" id="per_page" value="50"> 

我目前通过提供该页面：

ember cli 

所以节点托管和有花哨实时重新加载的事情，以便当我更新作为底层应用程序的一部分的页面时。

那么是什么导致页面重新加载输入按键内的输入？它可能是节点或实时重新加载？当用户按下回车键时，输入是否应该刷新页面，而我错过了我的HTML傻瓜书？

**更妙的是，我怎么可以拦截，而是通过调用一个函数：

{{action** "myFunction"}} 

Answer 1

这是因为，当你按下回车键，表单被提交，导致页面重新加载。你需要做的是在表单上设置onsubmit="return false"，这样在提交时就不会发生任何事情。可以绑定输入通过增加action属性action="doSomething"

<form onsubmit="return false"> 
     {{input type="text" action="createComment" value=topic id="inputTopic"}} 
</form> 

Answer 2

我有同样的问题，执行一些动作 - 什么工作对我来说，是覆盖这样的输入组件的按键事件：

keyPress: function (e) { 
    var keyCodeEnter = 13; 

    if (e.keyCode === keyCodeEnter) { 
     return false; 
    } 
} 

希望它能帮助未来的人！ :)

Answer 3

历史灰烬已经处理了这个用例用下面的代码：

<form {{action 'submitForm' on='submit'}}> 
    <!-- the rest of your form here --> 

    <button type='submit'>Submit</button> 
</form> 

这可以防止从形式刷新页面。

有，给你更多的控制权，给你的事件，这样你可以管理自己的另一种方法：

<form onsubmit={{action 'submitForm'}}> 
    <!-- the rest of your form here --> 

    <button type='submit'>Submit</button> 
</form> 

在这种情况下，你会得到一个事件，必须调用event.preventDefault()停止页面刷新。

actions: { 
    submitForm(event) { 
    event.preventDefault(); 
    } 
} 

这是两者的运行例子：https://ember-twiddle.com/827820958e054f7af57b7677630729fc?openFiles=controllers.application.js%2C