私はかなり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> 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.");
},