我正在尝试将我的余烬应用程序连接到后端的节点服务器。现在,我有一个注册和登录表单,当用户提交任何一个表单时,它将使用Passport在节点中进行身份验证过程设置。但是,当按下提交按钮时,它只是重新加载当前页面,甚至不发送HTTP发布请求。关于为什么会发生这种情况的任何想法/如何解决它?
这是我的适配器:
import DS from "ember-data";
var ApplicationAdapter = DS.RESTAdapter.extend({
host: 'http://localhost:8080'
});
export default ApplicationAdapter;
这是我的注册控制器:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
new: function() {
console.log('creating new user...');
var model = this.get('user');
user = this.get('store').createRecord('user', {
title: model.get('title'),
password: model.get('password')
});
user.save().then(function(data) {
// Clear the form.
Ember.$(':input').val('');
});
},
}
});
这是我的模特:
import DS from 'ember-data';
export default DS.Model.extend({
username: DS.attr('string'),
password: DS.attr('string')
});
以下是表格:
<div class="row text-center">
<h1>Signup</h1>
</div>
<form>
<div class="row">
<div class="medium-6 medium-centered columns">
{{input value=username type="text" placeholder="Username"}}
</div>
</div>
<div class="row">
<div class="medium-6 medium-centered columns">
{{input value=password type="password" placeholder="Password"}}
</div>
</div>
<div class="row">
<div class="medium-6 medium-centered columns">
{{input class="button" type="submit" value="Signup"}}
</div>
</div>
</form>
答案 0 :(得分:3)
好吧,所以这里似乎有一些问题。
首先,看一下您发布的控制器,有些事情看起来并不正确:
performSelector:
变量user
来自控制器的get
属性,但它永远不会被定义user
清除表单,如果输入绑定到模板,则表示没有任何意义。我们首先要清理模板,这将推动对控制器的改进:
Ember.$(':input').val('');
主要问题似乎是您正在使用<div class="row text-center">
<h1>Signup</h1>
</div>
<form>
<div class="row">
<div class="medium-6 medium-centered columns">
{{input value=username type="text" placeholder="Username"}}
</div>
</div>
<div class="row">
<div class="medium-6 medium-centered columns">
{{input value=password type="password" placeholder="Password"}}
</div>
</div>
<div class="row">
<div class="medium-6 medium-centered columns">
<button class="button" type="submit" {{action 'createUser'}}>Signup</button>
</div>
</div>
</form>
帮助按钮,这实际上没有任何意义。 {{input}}
帮助器用于输入文本。我们还将操作移动到绑定到被点击的按钮,这是您想要的行为。
现在,控制器:
{{input}}
现在我们有一个定义了两个属性的控制器,用于保存新用户的用户名和密码。它们绑定到模板中的输入字段,我们操纵它们既可以从模板中获取值,也可以再次清除它们。
答案 1 :(得分:2)
默认情况下,您有一个提交按钮,可以执行发布请求。您可以执行以下操作。
<form {{action 'new' on='submit'}}>
<div class="row">
<div class="medium-6 medium-centered columns">
{{input value=user.username type="text" placeholder="Username"}}
</div>
</div>
<div class="row">
<div class="medium-6 medium-centered columns">
{{input value=user.password type="password" placeholder="Password"}}
</div>
</div>
<div class="row">
<div class="medium-6 medium-centered columns">
<button class="button" type="submit">Signup</button>
</div>
</div>
</form>
这基本上表示拦截提交事件并改为调用动作。
请注意,我还在您的输入值中添加了user.
,否则您将从控制器中获取this.get('username')
等等。