如何使用服务器端变量(JSON文件)的值在jQuery小部件工厂中设置选项

Question

我想用JSON文件变量值为小部件设置选项吗？如何将json文件传递给客户端？

代码正在从jQueryUI Widget工厂中复制。

 <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小部件工厂代码中查看一下这个_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中加载远程数据。
• 在创建时将这些数据传递给您的小部件$('selector').colorize(colorizeOptions)