我想做的是,每当用户停止在“项目名”字段中输入内容时进行一次ajax调用,并对照数据库进行检查,并显示一条错误消息,指出“它存在”。但是keypress事件不能按预期方式工作,首先它会忽略输入的第一个字母,结果单词没有完全发送到数据库。
这是我的Controller:
Controller
App.ProjectController = Ember.ArrayController.extend({ actions : { createNew : function() { data = { projectname : this.get('projectname'), projectdesc : this.get('projectdesc'), projectbudget : this.get('projectbudget'), }; console.log(JSON.stringify(data)); //console.log(id); $.ajax({ type : "POST", url : "http://ankur.local/users/createNewProject", data : data, dataType : "json", success : function(data) { console.log('success'); //alert(''); } }); alertify.success("Project Created"); this.set('projectname', ""); this.set('projectdesc', ""); this.set('projectbudget', "") return false; }, checkName: function(){ data = { projectname : this.get('projectname'), }; var checkedName = $.ajax({ type : "POST", url : "http://ankur.local/users/checkProjectName", data : data, dataType : "json", success : function(data) { console.log('Yes it'); } }); console.log(data); console.log(checkedName); } } });
这是HTML,
<script type="text/x-handlebars" id="project"> <div class="row" style="padding-left: 30px"> <div class="span12" id="form-container"> <div class="well well-small"> <p style="text-align: center"> You can create a new Project by filling this simple form. </p> <p style="text-align: center"> Project Name should be minimum 10 characters & maximum 50 characters. Project Description 10 to 300 characters. </p> </div> <div class="row" id="test"> <div class="offset3 span8"> <form class="form-horizontal" id="projectform"> <div class="control-group"> <label class="control-label" for="projectname">Project Name: </label> <div class="controls"> {{view Ember.TextField valueBinding='projectname' style="max-width: 100%" onEvent="keyUp" action=checkName}} </div> </div> <div class="control-group"> <label class="control-label" for="projectdesc">Project Description:</label> <div class="controls"> {{view Ember.TextArea valueBinding='projectdesc' style="max-width: 100%"}} </div> </div> <div class="control-group"> <label class="control-label" for="projectbudget">Project Budget($)</label> <div class="controls"> {{view Ember.TextField valueBinding='projectbudget' id="budget" style="max-width: 100%"}} </div> </div> <div class="control-group"> <div class="controls"> <button class="btn" {{action 'createNew' }}>Add Project</button> </div> </div> </form> </div> </div> </div> </div>
我可以做出哪些改进才能达到预期的效果?
按键工作正常,在文本框值更改之前进行按键操作。
看起来您所需要的方式不支持按键。幸运的是,它很容易覆盖:
App.KeyUpTextField = Em.TextField.extend({ keyUp:function(event){ this.sendAction('upKeyAction', event); } }); {{view App.KeyUpTextField value=projectname upKeyAction='checkName'}}
顺便说一句,我会在您的keyUp函数中进行反跳或类似操作,似乎在每个keyup事件上发送请求都会有点chat不休。