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

Question

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

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

首先，查看您发布的控制器，有几处看起来不正确：

• 永远不会声明 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}} 帮助器用于输入文本。我们还将动作移动到被点击的按钮上，这是您想要的行为。

现在，控制器：

import Ember from 'ember'; 

export default Ember.Controller.extend({

  // Username for the new user
  username: '',

  // Password for the new user
  password: '',

  actions: {

    // Create a new user
    createUser() {
      const username = this.get('username');
      const password = this.get('password');

      this.get('store').createRecord('user', {
        username,
        password
      }).save()
      .then(() => {
        this.send('clearForm');  // Invokes the `clearForm` action on the controller
      })
      .catch(() => {
        // Do some kind of error handling if the creation fails
      });
    },

    // Clear the form
    clearForm() {
      this.set('username', '');
      this.set('password', '');
    }
  }
});

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

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') 等形式获取它们。