Как установить параметры в фабрике виджетов jQuery со значениями из серверных переменных (файл JSON)

Question

Я хочу установить параметры для виджета со значениями переменных файла JSON? Как я могу сделать это плюс, как я могу передать файл JSON на стороне клиента?

Код копируется из фабрики виджетов jQueryUI

 <script>
  $(function() {

    $.widget( "custom.colorize", {

      // ***Need to pass option values over here***

   options: {
        red: 255,
        green: 0,
        blue: 0,


        change: null,
        random: null
      },


      _create: function() {
        this.element
          // add a class for theming
          .addClass( "custom-colorize" )
          // prevent double click to select text
          .disableSelection();

        this.changer = $( "<button>", {
          text: "change",
          "class": "custom-colorize-changer"
        })
        .appendTo( this.element )
        .button();


        this._on( this.changer, {

          click: "random"
        });
        this._refresh();
      },


      _refresh: function() {
        this.element.css( "background-color", "rgb(" +
          this.options.red +"," +
          this.options.green + "," +
          this.options.blue + ")"
        );


        this._trigger( "change" );
      },

      // ***And in the random function as well***

      random: function( event ) {
        var colors = {
          red: Math.floor( Math.random() * 256 ),
          green: Math.floor( Math.random() * 256 ),
          blue: Math.floor( Math.random() * 256 )
        };


        if ( this._trigger( "random", event, colors ) !== false ) {
          this.option( colors );
        }
      },

      _destroy: function() {
        // remove generated elements
        this.changer.remove();

        this.element
          .removeClass( "custom-colorize" )
          .enableSelection()
          .css( "background-color", "transparent" );
      },

      _setOptions: function() {

        this._superApply( arguments );
        this._refresh();
      },

      _setOption: function( key, value ) {

        if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
          return;
        }
        this._super( key, value );
      }
    });


    $( "#my-widget1" ).colorize();


    $( "#my-widget2" ).colorize({
      red: 60,
      blue: 60
    });


    $( "#my-widget3" ).colorize( {
      green: 128,
      random: function( event, ui ) {
        return ui.green > 128;
      }
    });


    $( "#disable" ).click(function() {
      if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
        $( ":custom-colorize" ).colorize( "enable" );
      } else {
        $( ":custom-colorize" ).colorize( "disable" );
      }
    });


    $( "#black" ).click( function() {
      $( ":custom-colorize" ).colorize( "option", {
        red: 0,
        green: 0,
        blue: 0
      });
    });
  });
  </script>
</head>

Answer 1

Одним из решений будет использование _getCreateOptions функция для достижения этого.

Взгляните на код фабрики виджетов jquery-ui, чтобы увидеть, где это _getCreateOptions функция называется:

_createWidget: function( options, element ) {

    [...]

    this.options = $.widget.extend( {},
        this.options,
        this._getCreateOptions(), // function you need to implement
        options );

    [...]

    this._create();
    this._trigger( "create", null, this._getCreateEventData() );
    this._init();

}

Как вы можете видеть свой виджет options будет объединен со значением, возвращаемым вашим _getCreateOptions функция, и это будет сделано только во время создания виджета и до вызова вашего _create а также _init функции.

В вашем случае ваш _getCreateOptions может выполнить AJAX-вызов для получения данных JSON со стороны сервера. Что-то вроде:

_getCreateOptions: function() {
    return $.get({
        url: 'http://path-to-your-json-data',
        dataType: 'json'
    })
    .done(function(jsonData) {
        return jsonData;
    })
    .fail(function() {
        // ...
    });
}

Другое решение, может быть:

• загрузка ваших удаленных данных перед инициализацией виджета (с помощью вызова ajax или другого метода) в colorizeOptions js var, например.
• передать эти данные в ваш виджет $('selector').colorize(colorizeOptions) во время создания