1

我很好奇什么可能是一个比我想象的更大的问题。

我正在使用以下代码在一组文本输入字段上侦听“keyup”。如果用户在给定的时间内停止输入，我会使用 AJAX 将数据发送到控制器。

我决定在 JavaScript 中尝试 OOP 来实现这一点。这是因为我想要每个输入字段的计时器方法的新实例。（绝对清楚，我对 javascript 中的 OOP 非常陌生，所以这可能很可怕。让我知道。）

这是带有方法的主类：

    function FieldListener(entity){
      t = this;

      t.typingTimer;                // Timer identifier
      t.doneTypingInterval = 1000;  // Time in ms. e.g.; 5000 = 5secs        
      t.entity = entity;

      entity.bind("keyup", function(){t.setTimer();});
    }

    FieldListener.prototype.setTimer = function(){
      t = this;

      // User is still typing, so clear the timer.
      clearTimeout(t.typingTimer);

      // Get the field name, e.g.; 'username'
      t.entityType = t.entity.attr("name");
      // If the value is empty, set it to a single space.
      if(!(t.val = t.entity.val())){
         t.val = ' ';
      }
      t.noticeSpan = t.entity.siblings("span");
      // Display 'waiting' notice to user.
      t.noticeSpan.html('...')

      t.typingTimer = setTimeout(function(){t.doneTyping();},t.doneTypingInterval);
    }

    FieldListener.prototype.doneTyping = function(){
       // Encode for passing to ajax route.
      t = this;

      valueType = encodeURIComponent(t.entityType);
      value = encodeURIComponent(t.val);

      $.ajax({
        url: '/check/'+valueType+'/'+value,
        type: 'GET',
        processData: false
      })
      .done(function(validationMessage){
        t.noticeSpan.html(validationMessage);
      })
      .fail(function(){
        t.noticeSpan.html("Something went wrong. Please try again.");
      });       
    }

所以从这里我希望能够为每个输入字段创建一个 FieldListener 类的对象。

我知道我可以很容易地做到这一点，如果我有每个这样的 id：

   var fieldListener = new FieldListener($("#someFieldID"));

但我想用给定的类名迭代每个字段。也许接近这个？：

   i = 0;
   $(".info-field").each(function(){
      i = new FieldListener($(this));
   });

但这不起作用（而且看起来不太好）。

有什么想法吗？（我也对类/方法代码的批评/改进感到好奇。）

编辑：根据@ChrisHerring 的问题：问题在于它似乎创建了对象，但仅针对 each() 方法中的最后一个元素。因此，与“.info-field”类的最后一个输入字段关联的跨度显示从 AJAX 返回的validationMessage，无论我输入的是哪个字段。

更新：

创建新对象似乎有问题。例如，如果不是遍历 each() 方法，而是简单地跟随一个类启动另一个类，如下所示：

   var fieldListener1 = new FieldListener($("#someFieldID"));
   var fieldListener2 = new FieldListener($("#someOtherFieldID"));

fieldListener2 会覆盖在启动 fieldListener1 时保存的变量。这意味着当我在 ID 为“#someFieldID”的输入字段中键入时，它的行为就像我在 ID 为“#someOtherFieldID”的输入字段中键入一样。想法？

更新＃2（现在解决）：

看来我现在已经解决了这个问题。我需要在 't = this;' 之前添加 'var' 在 FieldListener 类中。当然，仍然欢迎任何评论/批评。;)

4

3 回答 3

1

我认为您应该使用 jquery.on()来处理绑定。

$(body).on({

   keyup: function () { HandleKeyUpEvent($(this)); },
   keydown: function () { HandleKeyDownEvent($(this)); }

  }, ".info-field");

我意识到这与您最初的编码想法（使用原型）背道而驰，但如果您打算这样做，它仍然是 OOP。

于 2012-04-24T00:48:56.920 回答
1

我想你想要一个对象数组FieldListener。

var myListeners = [];
i = 0;
$(".info-field").each(function(){
    myListeners[i] = new FieldListener($(this));
    i++
});

这会给你一个列表，页面上第一个的侦听器在FieldListeners哪里，第二个的侦听器在哪里，等等。myListeners[0].info-fieldmyListeners[1]

编辑：看来你已经解决了这个问题。不过，这个答案以后可能仍然会派上用场，所以我不会删除它。=)

于 2012-04-24T00:49:32.103 回答
1

t 变量是全局变量。“keyup”事件的函数是动态评估的，这意味着它会获取 t 的最后一个值。

改变

  t = this;

到

  var t = this;
于 2012-04-24T00:58:29.140 回答