Question

我正在尝试将我的余烬应用程序连接到后端的节点服务器。现在，我有一个注册和登录表单，当用户提交任何一个表单时，它将使用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>

Answer 1

好吧，所以这里似乎有一些问题。

首先，看一下您发布的控制器，有些事情看起来并不正确：

永远不会声明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}}

现在我们有一个定义了两个属性的控制器，用于保存新用户的用户名和密码。它们绑定到模板中的输入字段，我们操纵它们既可以从模板中获取值，也可以再次清除它们。

Answer 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')等等。

Ember应用程序未使用Ember Data发布到服务器

2 个答案: