Question

我正在尝试使用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)

我转到第12778行的jquery-ui.js文件，我看到它正在调用Globalize.format。所以我进入我的Globalize.js文件，并没有称为格式的函数......是什么给出了什么？

Answer 1

来自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 );
      }
    });
  }
});

Answer 2

您收到错误的原因是jQuery conflict与其他人有关联。请检查哪个JS导致conflict的问题。如果您发现js添加jQuery.noConflict();来解决您的问题。

jQuery调用未定义的Globalize.format函数

2 个答案: