autoNumericとKnockoutを使用した数値のマスキング

一般的に、リピーター上に構築されたコントロールの1つを書き換えて、クライアントに対してより簡単で応答性の高いものにするタスクに直面しました。 彼はノックアウトを使用することにしました。 内部では、DevExpressテキストフィールドはデジタルデータの表示に使用され、非常に便利で適切に提供されていますが、疑問が生じましたが、通常のテキストフィールドに置き換えてマスクを追加できます。

開始する

この問題を解決するために、問題を迅速かつ簡単に解決できる通常のjqueryプラグインまたはライブラリを探し始めました。 その結果、2つのライブラリが見つかりました。

• jquery プラグインjquery.maskedinput jquery.maskedinputプラグインページ
• AutoNumeric ライブラリautoNumericライブラリページ

分析

ライブラリの機能を見ると、入力マスクを表示するのではなく、その場で入力値を処理する機能があるため、 autoNumericを使用すると断言できます。 その動作は、DevExpressテキストフィールドの動作に似ています。 残念ながら、 jquery.maskedinputプラグインはこの可能性を発見しませんでした。 テキストフィールドに表示される厳密なマスクを使用してデータを入力する可能性があり、今後の入力形式についてユーザーに通知します。 私の場合、このような処理は適切ではありません。

申込み

さて、テキストフィールドのデータ用のマスキングライブラリを選択して、私は決定しましたが、ここでフィールドのマスクをどのように結び付けるかを示します。 最初は、単一の入力形式、特定のクラスを使用するすべての必要なフィールドを設定し、jqueryを使用してautoNumericライブラリにフィードするというアイデアがありました。 しかし、この解決策はあまり便利ではないように思えました。

それから、ノックアウトの力を使ってみませんか！ ノックアウトを使用すると、データバインディング用のカスタムハンドラーを実装できるため、このようなハンドラーを作成し、 data-bind=""



属性で指定することにしました。

autoNumericについて少し

問題を解決するために私が使用したいくつかの有用な方法の価値を示します。

• autoNumeric()
  
  
  
  メソッド-セレクターを使用して、指定された要素の自動マスキングを有効にできますautoNumeric()
  
  
  
  例： $('.autonum').autoNumeric();
  
  
  
  
• メソッドautoNumericGet();
  
  
  
  -算術演算で使用できる値（つまり、入力データを修飾する区切り文字から解放された値）を取得できます。 例： $(selector).autoNumericGet();
  
  
  
  
• メソッドautoNumericSet(value);
  
  
  
  -数値の出力の美しさのために、値value
  
  
  
  処理し、必要な区切り文字で装飾します。 たとえば、 $(selector).autoNumericSet(value);
  
  
  
  

パラメーターとしてautoNumeric()



メソッドに渡されるオプションの値を指定します。

• aSep-数百に使用されるセパレータを示します
• aDec-小数部に使用されるセパレータを示します
• mDec-小数部区切り記号の後に表示される桁数を示します

autoNumericを構成するための転送の例（使用するオプション）：

 $('.autonum').autoNumeric({ aSep: ',', aDec: '.', mDec: 0 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

*これは、 autoNumericが数百の整数部分と「。」の区切り文字に「、」を使用することを意味します。 小数部の区切りとして。 また、分数区切りの後の桁数は0になります（つまり、整数が表示されます）。

ノックアウトを使用した実装

autoNumericのカスタムデータバインディングハンドラーの実装

  ko.bindingHandlers.numberMaskedValue = { init: function(element, valueAccessor, allBindingsAccessor) { //  ,    , //     var options = allBindingsAccessor().autoNumericOptions || { aSep: ',', aDec: '.', mDec: 0 }; // html       $(element).autoNumeric(options); //   'focusout' , //     observable  ko.utils.registerEventHandler(element, 'focusout', function() { var observable = valueAccessor(); //        value = $(element).autoNumericGet(); observable(isNaN(value) ? 0 : value); }); }, update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); //   ,   ,  $(element).autoNumericSet(value); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記の実装により、このハンドラーを次のように使用できます。

 <input type="text" data-bind="numberMaskedValue: countOfFriends"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

またはオプション付き：

 <input type="text" data-bind="numberMaskedValue: countOfFriends, autoNumericOptions:{aSep: ',', aDec: '.', mDec: 3}"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このハンドラーの例では、値の更新は「focusout」イベントで発生します。 ユーザーにとって、入力された値は美しく見えますが、実際に観察可能なプロパティでは、算術処理に適したままです。 したがって、必要な（転送）コントロールautoNumericのバインドと、監視可能なプロパティの値の転送（更新）という2つの問題をすぐに解決できます。

参照資料

• jsFiddleでこのカスタムハンドラーを使用する完全な例 。 実装では、フィールドに保存されている実際の値と、ユーザーのテキストフィールドに表示されている値を明確に見ることができます。

ご清聴ありがとうございました！