如何在 ember.js 中处理表单提交？

Posted 2023-02-19

【中文标题】如何在 ember.js 中处理表单提交？

【英文标题】：How do I handle form submission in ember.js?

【发布时间】：2013-08-20 23:58:02

【问题描述】：

我有一个带有各种控件的表单。当提交按钮被按下时，一个 ajax 请求被发送到服务器，该服务器用一些我想要正确显示的 json 数据来回答。这是一次性的事情，不需要绑定等，数据被读取一次然后丢弃。我可以想到一些结合视图和 jquery 的方法，但是在 Ember.js 中执行此操作的正确方法是什么？

更具体地说：

1) 如何将表单参数从视图传递到将要处理提交事件的控制器？

2) 如果我要创建一个路由来表示提交的表单状态，我如何将参数序列化为对 Ember 有意义的路由路径？这可能吗？

【问题讨论】：

关于2号，看看***.com/questions/18164461/…

你已经看过 ember-data github.com/emberjs/data 了吗？

@matteo 我目前没有使用 ember-data。我正在学习 ember，我想在深入研究之前先了解魔法是如何工作的。上面的问题实际上明确了我对在 Ember 中可以做什么和应该做什么的困惑。

@mavilein 太好了，谢谢，我认为这清除了 2)

如果有人感兴趣，我们为 Ember 创建了一个新项目，帮助轻松构建使用 Bootstrap 样式的表单。 Github：github.com/ember-addons/ember-forms 演示页面：ember-addons.github.io/ember-forms

【参考方案1】：

由于还没有人回答，我创建了一个 fiddle 来展示我将如何做到这一点。

这是基本方法：

我会设置一个带有新（== 空）模型的控制器。 使用绑定将表单元素的值同步到控制器的模型。 创建一个操作，该操作采用更新后的模型并对其进行任何操作（这取代了传统的表单提交）。

因此，这种方式与传统的表单处理方式有着根本的不同：​​

没有 HTML 表单元素，因为它不是必需的。 数据不会自动提交到服务器，而是您可以通过 javascript 逻辑手动发送/提交。恕我直言，这是一个优势，因为您可以在将数据提交到服务器之前或之后执行额外的逻辑。 这与 REST-API 方法完美配合，例如 ember-date 或 ember-epf :-)

该示例显示了一个输入名字和姓氏的表单（只是概念上，因为没有 html 表单元素）。输入的值会同步到模型中，您可以“执行提交”。

JS代码：

App = Ember.Application.create();

App.Person = Ember.Object.extend(
    firstName : "",
    lastName : ""
);

App.IndexRoute = Ember.Route.extend(
  model: function()
      return App.Person.create()
  ,
    setupController : function(controller, model)
        controller.set("model", model);
    
);

App.IndexController = Ember.ObjectController.extend(
    submitAction : function()
        // here you could perform your actions like persisting to the server or so
        alert("now we can submit the model:" + this.get("model"));
    
);

显示使用值绑定的模板：

<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  input valueBinding="model.firstName"
  input valueBinding="model.lastName"
    <button action submitAction target="controller">Pseudo Submit</button>
  <p>model.firstName - model.lastName</p>
</script>

【讨论】：

我认为需要一个表单元素来支持人们使用除点击按钮之外的其他方法提交，例如按下“返回”键。

是的，你是对的。正如您正确指出的那样，它并非绝对需要，但仍然很方便。

表单元素仍然是可访问性所必需的，请参阅 [1]，例如屏幕阅读器。我通常做的是在<form> 标签中放置一个action "dummy" on="submit"，如果我想阻止默认行为，它的操作不会执行任何操作。 [1]developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/…

这是一种处理表单的好方法，但它引入了一个问题：当您将路线留在商店中时，您有一条记录不会保留在后端。因此，如果您每次进入当前路线时都在这条路线和另一条路线之间切换，您将向商店添加新记录。要解决该问题，请在IndexRoute 上创建一个deactivate 挂钩，该挂钩将在离开当前路线时调用，并遵循代码var model = this.modelFor("index"); if (model.get("isNew")) this.store.deleteRecord(model); 。这将从存储中删除未保存的记录。