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

时间:2015-08-11 17:46:00

标签: javascript node.js ember.js server ember-data

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

2 个答案:

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