0

jQuery でスピナー ウィジェットを使用してグローバライズしようとしています。私のコードインクルードは次のように並べられています：

<script type='text/javascript' src='/js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='/js/jquery-migrate-1.2.1.min.js'></script>
<script type='text/javascript' src='/css/jquery/jquery-ui.js'></script>

<script type='text/javascript' src="/resources/js/cldr.js"></script>
<script type='text/javascript' src="/resources/js/cldr/event.js"></script>
<script type='text/javascript' src="/resources/js/cldr/supplemental.js></script>

<script type='text/javascript' src="/resources/js/globalize.js"></script>

<script type='text/javascript' src="/resources/js/globalize/message.js"></script>
<script type='text/javascript' src="/resources/js/globalize/number.js"></script>
<script type='text/javascript' src="/resources/js/globalize/plural.js"></script>
<script type='text/javascript' src="/resources/js/globalize/date.js"></script>

<script type='text/javascript' src="/resources/js/globalize/currency.js"></script>
<script type='text/javascript' src='js/index.js'></script>

ドキュメントが言うようにcldrのものをロードしようとしました。その後、各スピナーコンテナを調べて、入力名に基づいてスピナーウィジェットを適用します:

$.when(
  $.get( "/resources/js/cldr/main/en/numbers.json" ),
  $.get( "/resources/js/cldr/main/en/currencies.json" ),
  $.get( "/resources/js/cldr/supplemental/likelySubtags.json" ),
  $.get( "/resources/js/cldr/supplemental/numberingSystems.json" ),
  $.get( "/resources/js/cldr/supplemental/ordinals.json" ),
  $.get( "/resources/js/cldr/supplemental/plurals.json" )
).then(function() {

  // Normalize $.get results, we only need the JSON, not the request statuses.
  return [].slice.apply( arguments, [ 0 ] ).map(function( result ) {
      return result[ 0 ];
  });

}).then( Globalize.load ).then(function() {

  /**
        Add a spinner to each spinner class
    */
    $(".spinner").each(function () {

        var $S = $(this).children("input");
        var name = $(this).attr("name");

        switch (name) {

            case "one-count":

                $S.spinner({
                  min: 0,
                  step: 1,
                  start: 0
                });

            break;

            case "currency-1k-count":

                $S.spinner({
                  min: 0,
                  step: 1000,
                  start: 0,
                  numberFormat: "C"
                });

            break;
        }
    });
});

スピナー ウィジェットのプロパティ セクションに numberFormat を含めて、ページ上のスピナーをクリックすると、次のエラーがスローされます。

Uncaught TypeError: Globalize.format is not a function jquery-ui.js(line:12778)

jquery-ui.js ファイルの 12778 行に移動すると、Globalize.format が呼び出されていることがわかります。だから私は Globalize.js ファイルに行き、format と呼ばれる関数はありません...何が得られますか?

4

2 に答える 2

2

globalize ライブラリのバージョン 1.x から、すべてのモジュールで数値を書式設定するための書式関数はありませんが、通貨モジュールの currencyFormatter のように、特定のモジュールごとにメソッドがあるかどうか。私が見ている解決策は次のとおりです。

var locale = 'es-CO';

$.when(
  $.getJSON( window.Misc.urlFull("cldr/supplemental/likelySubtags.json") ),
  $.getJSON( window.Misc.urlFull("cldr/main/"+ locale +"/numbers.json") ),
  $.getJSON( window.Misc.urlFull("cldr/supplemental/numberingSystems.json") ),
  $.getJSON( window.Misc.urlFull("cldr/supplemental/plurals.json") ),
  $.getJSON( window.Misc.urlFull("cldr/supplemental/ordinals.json") ),
  $.getJSON( window.Misc.urlFull("cldr/main/"+ locale +"/currencies.json") ),
  $.getJSON( window.Misc.urlFull("cldr/supplemental/currencyData.json") )
).then(function() {

  // Normalize $.get results, we only need the JSON, not the request statuses.
  return [].slice.apply( arguments, [ 0 ] ).map(function( result ) {
    return result[ 0 ];
  });

}).then( Globalize.load ).then(function() {

  Globalize.locale( locale );

  $.widget( "ui.sspinner", $.ui.spinner, {
    _parse: function( val ) {
      if ( typeof val === "string" && val !== "" ) {
        val = window.Globalize && this.options.numberFormat ?
          Globalize.numberParser({ maximumFractionDigits : 10 })(val) : +val;
      }
      return val === "" || isNaN( val ) ? null : val;
    },

    _format: function( value ) {
      if ( value === "" ) {
        return "";
      }

      if( window.Globalize && this.options.numberFormat ){

        this.options.currency || ( this.options.currency = 'COP' );

        switch( this.options.numberFormat ) {
          case 'C': return Globalize(this.options.culture).formatCurrency( value, this.options.currency ); break;
          default: return Globalize(this.options.culture).formatNumber( value ); break;
        }
      }
    }
  });
  
  
  var config = {
    '.spinner-currency' : {
      step: 5,
      start: 1000,
      min: 0,
      numberFormat: "C",
      culture: 'es-CO',
      currency: 'COP'
    },
    '.spinner-quantity': {
      step: 1,
      start: 1,
      min: 0
    }
  };

  for (var selector in config) {

    $(selector).each(function(index, el) {
      var $el = $(el);
      var spinner = {};

      if( !$el.sspinner( "instance" ) ){
        spinner = $el.sspinner(config[selector]);

        if( $el.val() == '' )
          spinner.sspinner( "value", 0 );
      }
    });
  }
});

于 2016-06-20T22:24:31.987 に答える
0

あなたはjQuery conflict他のものを持っているので、エラーが発生しました。SO の問題の原因となっている JS を確認してくださいconflict。js add が見つかった場合はjQuery.noConflict();、問題を解決してください。

于 2016-01-06T16:43:37.197 に答える