我如何处理 ember.js 中的表单提交? [英] How do I handle form submission in ember.js?

问题描述

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

I have a form with various controls. When the submit button is pushed an ajax request is sent to the server which answers with some json data I want to display properly. This is a one-off thing, no bindings, etc needed, the data is read-once and discarded afterwards. I can think of some ways to do this combining views and jquery but what is the proper way to do this in Ember.js?

更具体地说:

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

1) How do I communicate the form parameters from the view to the controller that is going to handle the submission event?

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

2) If I were to create a route to represent the submitted form state how do I serialize the parameters into a route path that makes sense for Ember? Is that even possible?

推荐答案

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

Since no one answered yet, i have created a fiddle showing how i would to this.

这是基本方法:

1. 我会设置一个带有新(== 空)模型的控制器.
2. 使用绑定将表单元素的值同步到控制器的模型.
3. 创建一个操作，该操作采用更新的模型并执行您想要的任何操作(这取代了传统的表单提交).

1. I would setup a controller with a fresh (== empty) model.
2. Use bindings to synchronize the values of form elements to the model of the controller.
3. Create a action that takes the updated model and does whatever you want with it (this replaces the traditional form submit).

因此该方法与以这种方式处理表单的传统方式有着根本的不同:​​

1. 没有 HTML 表单元素，因为它不是必需的.
2. 数据不会自动提交到服务器，您可以通过 JavaScript 逻辑手动发送/提交数据.恕我直言，这是一个优势，因为您可以在将数据提交到服务器之前或之后执行其他逻辑.
3. 这非常适合 REST-API 方法，例如 ember-date 或 ember-epf :-)

1. There is no HTML form element, since it is not needed.
2. The data is not submitted automatically to the server, instead you would send/submit it manually via javascript logic. Imho this is an advantage as you could perform additional logic before or after submitting the data to the server.
3. This plays nicely with REST-API approaches like ember-date or ember-epf :-)

该示例显示了一个用于输入名字和姓氏的表单(只是概念上的，因为没有 HTML 表单元素).输入的值会同步到模型中，您可以执行提交".

The example shows a form (just conceptually, as there is no HTML form element) to enter a first and last name. The entered values are synced to the model and you can can "perform a submit".

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>

这篇关于我如何处理 ember.js 中的表单提交?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！