主要preSS事件工作不正常的灰烬

问题描述

我想要做的是，让Ajax调用，每当用户停止输入的东西在项目名称字段和放大器;检查对数据库和放大器;显示一个错误讯息说，它的存在。但关键preSS事件没有按预期工作，首先它省略了输入和放大器的第一个字母;作为一个结果字不会被发送到数据库中完全。

What I want to do is, make an ajax call whenever user stops entering something in the 'projectname' field & check it against database & show an kind of error message saying, "It exists". But the keypress event is not working as expected, first of all it omits the first letter entered & as a result word is not sent to database completely.

下面是我的控制器：

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代码，

and Here's the 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>

哪些改进我可以达到预期的效果？

What improvements I can make to achieve the desired result?

推荐答案

键preSS按预期工作，重点preSS发生前的文本框的值发生了变化。

Key press is working as expected, key press happens before the textbox value has changed.

它看起来像钥匙了不支持您想寿的方式。幸运的是它真的很容易覆盖：

It looks like key up isn't supported in the manner that you want tho. Fortunately it's really easy to override:

App.KeyUpTextField = Em.TextField.extend({
  keyUp:function(event){
    this.sendAction('upKeyAction', event); 
  }
});


{{view App.KeyUpTextField value=projectname upKeyAction='checkName'}}

顺便说一句我愿意做去抖动或类似的东西在你的KEYUP功能，现在看来似乎会变得有点话多派在每个keyup事件的请求。

BTW I'd do debounce or something like that in your keyUp function, it seems like it'd get a bit chatty to send the request on every keyup event.

这篇关于主要preSS事件工作不正常的灰烬的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！