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

问题描述

我有一个表单与各种控件。当提交按钮被按下时，ajax请求被发送到服务器，该服务器用一些正确显示的json数据进行回答。这是一个一次性的事情，没有绑定等需要，数据被读取一次并被丢弃。我可以想到一些方法来结合观点和jquery，但是在Ember.js中采用哪种正确的方法呢？

更多具体来说：

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

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

解决方案

由于没有人回答，我创建了一个小提琴显示我将如何做到这一点。

这是基本的方法：

1. 我将设置一个带有新鲜（==空）模型的控制器。


2. 使用绑定将表单元素的值同步到控制器的模型。


3. 创建一个采用更新的模型并执行任何您想要的模型的操作（这将替换传统表单提交）。

所以这种方法与传统的以这种方式处理表单的方式截然不同： / strong>

1. 由于不需要，因此不存在无HTML表单元素。


2. 数据不会自动提交给服务器，而是通过javascript逻辑手动发送/提交数据， / strong>即可。 Imho这是一个优势，因为您可以在将数据提交到服务器之前或之后执行额外的逻辑。


3. 这个很好地使用REST-API方法，如ember-日期或者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（）{
 //这里您可以执行您的操作，如持久服务器或
 alert（现在我们可以提交模型：+ this.get（model））; 
} 
}）; 
  

显示使用值绑定的模板：

 < script type =text / x-handlebarsdata-template-name =index> 
< h2>索引内容：< / h2> 
 {{input valueBinding =model.firstName}} 
 {{input valueBinding =model.lastName}} 
< button {{action submitAction target =controller}} >伪提交< / button> 
< p> {{model.firstName}}  -  {{model.lastName}}< / p> 
< / script> 
  

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?

More specifically:

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

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?

解决方案

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

This is the basic approach:

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).

So the approach is fundamentally different from the traditional way of handling forms this way:

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 :-)

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".

The JS code:

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"));
    }
});

The template showing the use of value bindings:

<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屋！