2

私はかなりbackbonejsの初心者です。フォーム データを mysql に送信しています。

ユーザー名としてメールアドレスを入力する特別な入力ボックスが 1 つあります。現状では、クライアント側ですべての入力フィールド (ユーザー、パス、住所、電話など) をチェックし、ボタンでイベントを使用し、モデルをロードし、PHP を使用してデータをデータベースに入れることができます。これは問題なく動作し、テスト済みです。バックエンドの検証は正常に機能し、必要に応じてブラウザーにフィードします。

ここで、レコードを書き込む前にバックエンドに対して loginname フィールドをチェックしたいと思います (最終的な送信でバックエンドでこれをトラップできることはわかっていますが、ここで実行したいと考えています)。ユーザーが同じメール アドレスのアカウントを既に持っている場合は、そのクライアント側をキャッチしたいと考えています。問題は、ログイン名フィールドから移動するときに、このぼかしをキャプチャする方法を見つけることができないように見えることです (または onblur を使用するか、使用するものを変更する)。 、再び PHP を使用し、フラグ「新規」または「既存」を送り返します

Google 開発者ツールでエラーなし

    define([
   'jquery',
   'underscore',
   'backbone',
   'lib/jquery-migrate-1.2.1',
   'models/RegisterModel',
   'text!templates/RegisterTemplate.html',
   'lib/jquery.maskedinput-1.0',
   'lib/bootstrap-acknowledgeinput.min',
   'lib/jqBootstrapValidation'
    ], function($, _, Backbone, jQueryMigrate, RegisterModel, RegisterTemplate,   
        MaskedInput,Ack, jqAck){

   var RegisterView = Backbone.View.extend({

    el: $("#container"),
    events: {
          'click .btn-primary': 'saveClient',
          'focusout .loginname': 'usercheck'
       },

     usercheck: function() {     //** not working
         console.log("usercheck detected");
         alert("Alerts suck.");
         },

     render: function(){

    //Since our template has dynamic variables in it, we need to compile it
    var compiledTemplate = _.template( RegisterTemplate, this.model );
    this.$el.html(compiledTemplate); //Replaces EVERYTHING inside the <div 
                                           id="container">
    this.$('#phone').mask('(999) 999-9999');
        this.$('#phone2').mask('(999) 999-9999');
    this.$('#zip').mask('99999');

        $(function () {     //**  working
           $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); 
         });

    $('.loginname').live("click", function () {    //** not working
       alert('AHHHHHH!');
     });

        $().acknowledgeinput({        // ** this works fine
            success_color: '#00FF00',
        danger_color: '#FF0000',
         update_on: 'keyup'
        });

* * Chrome で name/id = loginname の入力のぼかしイベントを調べました

HTML id の要素のぼかしを見ました (Chrome はそれが input#loginname であると言います) には、ぼかしイベントが添付されています。コードを少し変更しましたが、まだトリガーされていないようです。それが単純なものなのか、それとも「これとスコープ」の問題の1つなのか、バックボーンではわかりません:)

<div id="container" class="row-fluid">
  <div class="span6">
    <div class="requiredNotice"><i class="icon-warning-sign icon-red"></i>&nbsp;Can't    
             be blank!</div>
    <h3>New Client Registration:</h3>
   <form class="form-horizontal" method="POST">
       <fieldset>
           <div class="control-group">
     <label class="control-label required" for="loginname">UserID (Email
             </label>
       <div class="controls">
                  <div class="input-prepend" data-role="acknowledge-input">
          <div data-role="acknowledgement"><i></i></div>
                         <input type="email" data-type="email" required="required"    
                             placeholder="Use email account"
                 maxlength="254" name="loginname" id="loginname" 
                             class="inputclass pageRequired
                 input-xlarge" />
            </div>
         <span class="loginname_error label label-info hide"></span>
       </div>
      </div>    ... etc

 events: {
         'click .btn-primary'   : 'saveClient',
         'focusout #input.loginname' : 'userCheck'      
      //   "blur input.loginname"      : "userCheck"
    },


 userCheck: function(e) {
     console.log("usercheck detected");
     alert("Alerts suck.");     
   },
4

2 に答える 2

5

.liveここでは必要ありません。イベントハッシュにも問題はありません。テンプレートに問題がある可能性があります。このjsfiddleで入力フィールドとfocusoutイベントを分離したところ、正常に機能しています。

<script type="text/template" id="formtemplate">    
    <form>
        <input type="text" class="loginname"  value="" placeholder="enter login"/>
    </form>
</script>

...

var View = Backbone.View.extend({
    events:{
        'focusout .loginname':'checkUser'
    },
    render:function(){
        this.$el.html($('#formtemplate').html());
    },
    checkUser:function(e){
        alert('checkUser'); //works well
    }
});

var view = new View();
view.render();
view.$el.appendTo('body');
于 2013-10-21T19:58:04.633 に答える