Question

我想要做的是，每当用户停止在'projectname'字段中输入内容时进行ajax调用＆amp;检查数据库＆amp;显示一种错误消息，说“它存在”。但是按键事件没有按预期工作，首先它省略了输入的第一个字母＆amp;因此，word不会完全发送到数据库。

这是我的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>

我可以为实现预期效果做出哪些改进？

Answer 1

按键按预期工作，按键发生在文本框值更改之前。

看起来像你想要的方式不支持密钥。幸运的是，它很容易覆盖：

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


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

BTW我会在你的keyUp函数中做debounce或类似的事情，看起来在每个keyup事件上发送请求都会有点讨厌。

KeyPress事件在Ember中无法正常工作

1 个答案: