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)

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

4

2 回答 2

2

从 globalize 库的 1.x 版本开始，没有用于格式化所有模块中的数字的 format 函数，但它是否具有每个模块的方法，具体如货币模块的 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其他错误。所以检查哪个 JS 导致conflict. 如果你找到了 js 添加jQuery.noConflict();来解决你的问题。

于 2016-01-06T16:43:37.197 回答