Backbone.js 和表单输入模糊答案

【问题标题】：Backbone.js and form input blurBackbone.js 和表单输入模糊
【发布时间】：2013-10-21 19:41:02
【问题描述】：

我几乎是一个骨干网新手。我正在向 mysql 提交表单数据。

我有一个特殊的输入框，用户可以在其中输入他或她的电子邮件地址作为用户名。就目前而言，我可以检查我所有的输入字段（用户、通行证、地址、电话等）客户端侧面，在按钮上使用事件，加载模型，使用 PHP 将数据放入数据库。这工作得很好并且经过测试。后端验证工作正常并提供给必要时浏览器。

现在我想在写入记录之前检查后端的登录名字段（我知道我可以在最终提交的后端捕获这个但想在这里做）。如果用户已经有一个具有相同电子邮件地址的帐户，我想抓住那个客户端。问题是当我离开登录名字段时，我似乎无法找到一种方法来捕捉这种模糊（或 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 中查看了输入名称/id = loginname 的模糊事件

HTML 我确实查看了带有 id 的 elmement 的模糊（Chrome 说它是 input#loginname）确实附加了模糊事件。我稍微更改了我的代码，但它似乎仍然没有触发。我从不知道骨干是简单的事情还是其中之一 “这个和范围”问题:)

<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.");     
   },

【问题讨论】：

尝试直接在初始化事件中绑定事件，而不是使用事件哈希。
能否提供示例代码？如果你定义了一个 $el，bind 意味着附加到当前定义的 $el 上，对吧？我在这个视图本身没有初始化函数，只有事件 { }
如果您仍然对stackoverflow.com/questions/13437822/… 感兴趣，我明天可以提供帮助。

标签： forms events backbone.js textbox blur

【解决方案1】：

.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');

【讨论】：

感谢收看。还是不行。我似乎无法在事件行上设置断点，并且代码永远不会到达 checkUser 函数。
在 chrome 开发者工具中检查 .loginname，并检查事件侦听器选项卡，它应该有一个与之关联的 blur 事件。如果您的模板/选择器没有问题

【解决方案2】：

好的 - 你说要把它绑起来模糊，这个格式终于奏效了！

'模糊输入#loginname'：'userCheck'

events: {
         'click .btn-primary'   : 'saveClient',    
         'blur input#loginname'      : 'userCheck'
      },
userCheck: function(e) {

     console.log("usercheck detected");
     alert("Alerts suck.");

  },

控制台没有出现，但至少我现在捕捉到了模糊！谢谢大家。

【讨论】：