如何清除ember js中的表单数据

问题描述

我非常新，我为新员工录入了一份表单，并通过route.Data数据保存成功。但是问题是表单提交后，我的表单数据未被清除。

代码如下：

应用程序。 js：

  App.Router.map（function（）{
 this.resource（'saveprofile'，{path ：'/ saveprofile /：profiledata'}）; 
}）; 
 
 App.NewprofileController = Ember.ObjectController.extend（{
 id：''，
 name：''，
名称：''，
 
 saveProfileAction：function（）{
 
 profiledata = [{id：this.get（id）}，
 {name：this.get名称）}，
 {名称：this.get（名称）}] 
 
 pdata = $ .ajax（{
 type：POST，
 dataType：json，
 url：/ saveprofile？profiledata =+ profiledata，
 data：JSON.stringify（profiledata），
 dataType：json，
 async：false}）。done（function（）{
 $ .bootstrapGrowl（Employee added successfully，{
 type：'success'，
 align：'center'，
 width：'1000'，
 allow_dismiss：false 
}）。responseJSON 
}）
}）; 
 
 console.log（pdata）
} 
}）; 
 
 App.SaveProfileRoute = Ember.Route.extend（{
 model：function（params）{
 console.log（params）; 
 return Ember。 getJSON（/ saveprofile？profiledata =+ params.profiledata）; 
}，
}）
  

index.html：

 < script type =text / x-handlebarsdata-template- NAME = newprofile > 
< div class =panel panel-primary> 
< div class =panel-heading> 
< h3 class =panel-title>新配置文件< / h3> 
< / div> 
< div class =panel-body> 
< form class =form-horizo​​ntalrole =formid =form> 
< br />< br /> 
< div class =control-group> 
< label class =control-labelfor =value> Employee Id：< / label> 
< div class =controls> 
 {{input type =textclass =input-mediumvalue = id required =true}} 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-labelfor =value>员工名称：< / label> 
< div class =controls> 
 {{input type =textclass =input-mediumvalue = name}} 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-labelfor =value>名称：< / label> 
< div class =controls> 
 {{input type =textclass =input-mediumvalue = assign}} 
< / div> 
< / div> 
< div class =control-group pull-left> 
< div class =controls> 
< button type =buttonclass =btn btn-primary{{actionsaveProfileAction}} id =button> Save< / button> 
< button type =buttonclass =btn btn-primary{{actioncancel}} id =button> Reset< / button> 
< / div> 
< / div> 
< / form> 
< / div> 
< / div> 
< / script> 
  

我在stackoverflow中搜索了这个，我找到一些解决方案，但是他们使用保存并退出函数。但是没有在ember.i中使用save方法直接保存在服务器端。

我的错误是什么？给我一些建议，在表单提交后清除表单数据。

解决方案

你必须在控制器内这样做： / p>

  var controller = this; 
 
 //将表单保存到服务器后：
 ... then（function（）{
 controller.set（'YourFormData'，''）; 
}）; 
  

您的表单数据必须是控件中绑定的属性，如您的id，名称和名称。

Hi i am very new to ember js. i wrote a form for new employee entry.and send data through route.Data saved successfully. But the problem is after form submission my form data not cleared.

The code as follows:

app.js:

App.Router.map(function() {
    this.resource('saveprofile', { path: '/saveprofile/:profiledata'});
});

App.NewprofileController = Ember.ObjectController.extend({
    id:'',
    name: '',
    designation: '',

    saveProfileAction: function () {

        profiledata = [{ "id": this.get("id")},
        {"name": this.get("name")},
        {"designation": this.get("designation")}]

        pdata = $.ajax({
            type: "POST",
            dataType: "json",
            url: "/saveprofile?profiledata=" +profiledata,
            data: JSON.stringify(profiledata),
            dataType: "json",
            async: false}).done(function() {
                $.bootstrapGrowl("Employee added successfully", {
                    type: 'success',
                    align: 'center',
                    width: '1000',
                    allow_dismiss: false
                }).responseJSON
            })
        });

    console.log(pdata)
}
});

App.SaveProfileRoute = Ember.Route.extend({
    model: function(params) {
        console.log(params);
        return Ember.$.getJSON( "/saveprofile?profiledata=" + params.profiledata);
    },
})

index.html:

     <script type="text/x-handlebars"  data-template-name="newprofile">
      <div class="panel panel-primary">
       <div class="panel-heading">
           <h3 class="panel-title">New Profile</h3>
       </div>
       <div class="panel-body">
         <form class="form-horizontal" role="form" id="form">
         <br/><br/>
       <div class="control-group">
        <label class="control-label" for="value">Employee Id:</label>
       <div class="controls">
            {{input type="text" class="input-medium" value=id required="true"}}
       </div>
       </div>
       <div class="control-group">
        <label class="control-label" for="value">Employee Name:</label>
       <div class="controls">
            {{input type="text" class="input-medium"  value=name}}
       </div>
       </div>
       <div class="control-group">
        <label class="control-label" for="value">Designation:</label>
       <div class="controls">
            {{input type="text" class="input-medium" value=designation}}
       </div>
       </div>
       <div class="control-group pull-left">
        <div class="controls">
         <button type="button" class="btn btn-primary" {{action "saveProfileAction" }} id="button">Save</button>
          <button type="button" class="btn btn-primary" {{action "cancel"}} id="button">Reset</button>
        </div>
       </div>
         </form>
      </div>
     </div>
  </script>

I searched for this in stackoverflow i find some solutions but they use save and exit functions.but i did not use save method in ember.i directly save at server side.

what is my mistake. Give me some advise to clear the form data after form submission.

解决方案

You have to do it inside the controller like this:

var controller = this;

//After saving the form to the server:
...then(function(){
 controller.set('YourFormData', '');
});

Your Form Data has to be a property with binding in the controller like your id,name and designation.

这篇关于如何清除ember js中的表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！