2

私がやりたいことは、ユーザーが「プロジェクト名」フィールドに何かを入力するのをやめたときに ajax 呼び出しを行い、データベースと照合して「存在します」というエラーメッセージを表示することです。しかし、キープレスイベントは期待どおりに機能しません。まず、入力された最初の文字が省略され、その結果、単語がデータベースに完全に送信されません。

これが私のもの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>

望ましい結果を得るために、どのような改善を行うことができますか?

4

1 に答える 1

5

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'}}

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.

于 2013-10-25T04:31:27.820 に答える