2016-10-06 1 views
0

これは厳しいものです。私はイベントリスナーを追加する必要があります。変更すると、他のフィールドとの検証ロジックの束が発生する必要があります。これは純粋なJSソリューションです。私が今持っていることをあなたに見せて、説明しましょう。オブジェクトのメソッドにアクセスできるaddEventListenerの変更

 var RowsArray = []; 
     var TrRow = function(valid,txt,dd){ 
      this.validateField = valid ; 
      this.txtValue = txt; 
      this.ddValue = dd; 

      this.validate = function() { 
      //validation logic that accesses the nodes validateField, txtValue. etc 
      }; 
     }; 

TrRowセットはRowsArrayになります。各行にはテキストボックス、ドロップダウンリストなどがあり、簡潔にするためにこのコードは短縮されています。このvalidate関数は、プロパティからノードにアクセスし、多くのロジックを実行することに注意してください。

だから私は、このマップ機能

Array.prototype.map.call(document.querySelectorAll('.gridview tr'), function(obj, index) { 

      var validateField = obj.querySelector('td:first-child > span'); 
      var txtValue = obj.querySelector('.txt_value'); 
      var ddValue = obj.querySelector('.dd_value'); 
      var internal = new TrSet(validateField, txtValue, ddValue); 

      internal.validate(); 
      RowsArray.push(internal); 
     }); 

を持っていると私はこのような何かをやろうとしているのonload。

... 
    var ddValue = obj.querySelector('.dd_value'); 
    var internal = new TrSet(validateField, txtValue, ddValue); 

    internal.validate(); 
    RowsArray.push(internal); 

    ///below is what I'm trying to do 
    ddValue.addEventListener('change', function() { 
     runTheValidateFunctionThatRelatesToTheCorrectObject() 
    }); 
    txtValue.addEventListener('keyup', function() { 
     runTheValidateFunctionThatRelatesToTheCorrectObject(); 
    }); 
}); 

この作品、と私は、これは我々がそれを持っていた古いjQueryの方法よりもはるかに優れていると思うなら、私は50未満までの500からコード数を減らすことができ、それはjqueryのだったので、これは、より効率的にする必要がありますこのコードは常にdomを登っているわけではありません。

答えて

0

私はほとんど家の中でストレッチしていました。私はマップ関数のインデックスを持っています。これは常に同じインデックスになりますRowsArrayしたがって、イベントリスナーを追加し、オブジェクト内の正しい関数を呼び出すのは簡単です...

関連する問題