2013-10-25 62 views
2

我想要做的是,讓Ajax調用,每當用戶停止在「項目名稱」字段中輸入一些&檢查對數據庫&顯示一個錯誤訊息說,「它的存在」。但按鍵事件沒有按預期工作,首先它省略了輸入&的第一個字母,因此字未完全發送到數據庫。KeyPress事件不能按預期工作在灰燼

這裏是我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 &amp; 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> 

哪些改進我能爲達到預期的效果?

回答

5

按鍵按預期工作,按鍵發生在文本框值改變之前。

它看起來像按鍵的方式不支持你想要的方式。幸運的是這很容易覆蓋:

​​

BTW我會做去抖動或類似的東西在你使用keyUp功能,它看起來像它會變得有點繁瑣發送每個keyup事件的請求。

+0

它工作完美!儘管我只是需要圍繞代碼進行包裝。 – user1601973