在 Ember 中获取表单内所有值的哈希答案

【问题标题】：Getting a hash of all values inside form in Ember在 Ember 中获取表单内所有值的哈希
【发布时间】：2015-04-30 08:41:19
【问题描述】：

我正在提交一个表单以在 Ember.js 中创建一个新的Review。该表单链接到我的reviews/new 控制器上的操作。

这是我的表单：
templates/reviews/new.hbs

  <form {{action "createReview" on="submit"}}>
    {{input value=name}}
    {{input value=content}}

    <input type="submit" value="Post this review" class="button">
  </form>

还有我的控制器：
controllers/reviews/new/js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    createReview: function(params) {
      console.log(this.get('name'));
      console.log(this.get('content');
    }
  }
});

目前我的问题是以有效的方式访问表单字段值。请注意，this.get('name') 会打印出name 输入字段的值，this.get('content') 也是如此。

但是有没有一种很好的方法来获取散列中的所有表单字段值？类似：this.get('allAttributes') 会输出：

{name: "John Doe", content: "Bla bla-bla bla blaaaaah"}

编辑

content 是 ember 中的保留字。不要将属性命名为“内容”

【问题讨论】：

标签： javascript ajax forms ember.js

【解决方案1】：

你可以在你的控制器上有一个用于表单的对象：

export default Ember.Controller.extend({
  formFields: Ember.Object.create(),
  actions: {
    createReview: function(params) {
      console.log(this.get('formFields.name'));
      console.log(this.get('formFields.content');
    }
  }
});

您需要使用 Ember 对象才能进行绑定。

  <form {{action "createReview" on="submit"}}>
    {{input value=formFields.name}}
    {{input value=formFields.content}}

    <input type="submit" value="Post this review" class="button">
  </form>

【讨论】：

后续问题。假设 OP 有一个动作进行了 Ajax 调用，例如：Ember.$.ajax('/foo').done(function(res){ ... });。在 done 处理程序中，某人更新 formFields 以便正确更新 View 的正确方法是什么？

【解决方案2】：

审查模型是这个的重要对象。

// reviews/new route
export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('review', {
      //predefined properties here
    }); 
  },
  actions: {
    // bubbling thru controller
    createReview: function() {
       this.get('model').save().then(function(review) {
          // action you needs if any
          self.transitionTo('reviews');
       }, function() {
          // on errors
       });
    },
    cancel: function() {
        this.transitionTo('reviews');
    }
  },
  deactivate: function() {
    var model = this.modelFor( this.routeName );
    if (model.get('isNew')) {
        model.destroyRecord();
    }
  }
});


//template
<form {{action "createReview" on="submit"}}>
  {{input value=model.name}}

  //errors example it depends of your backend and adapter
  {{#each model.errors.name as |error|}}
      <div class="error">
        {{error.message}}
      </div>
  {{/each}

  {{input value=model.content}}

  <input type="submit" value="Post this review" class="button">
  <button {{action "cancel"}}>Cancel</button>
</form>

【讨论】：