1

私が思っているよりも大きな問題が何かに興味があります。

次のコードを使用して、テキスト入力フィールドのグループで「キーア​​ップ」をリッスンしています。ユーザーが一定時間入力を停止すると、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() メソッドを反復するのではなく、次のように、1 つのクラスの開始を別のクラスの開始に従って行うだけです。

   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

t 変数はグローバルです。「keyup」イベントの関数は動的に評価されます。つまり、t の最後の値を取得します。

変化する

  t = this;

に

  var t = this;
于 2012-04-24T00:58:29.140 に答える
1

.on()バインディングを処理するにはjqueryを使用する必要があると思います。

$(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]の最初のリスナー、 は 2 番目のリスナーなどです。.info-fieldmyListeners[1]

編集：問題を解決したようです。ただし、この回答は後で役立つ可能性があるため、削除しません。=)

于 2012-04-24T00:49:32.103 に答える