jquery-ui / widgets 和引用通过选项

Question

我在jQuery小部件上遇到了一个奇怪的问题。

这是我尝试做的：https://jsfiddle.net/erazor/kc1122cs/

或

多或少，我希望有一个创建从属小部件的主小部件，这些小部件能够操作数组。我在主站中创建数组并将其提供给每个从站。现在，从站可以更改其数据，主站"应该"也可以访问它。

问题是，(我假设的(jQuery在调用_create之前会对选项进行某种复制/克隆。是吗？我是否以某种方式在文档中错过了它？

我有办法解决这个问题吗？

一种可能的方法是在创建后获取小部件的实例，然后直接设置数据？喜欢：

var wdg_inst=$('#widget_holder').test_widget('instance');
wdg_inst.Data=...;
wdg_inst.handleData();

无论如何，以某种方式直接在创建时传递引用会更容易。

非常感谢您的帮助！

Answer 1

我遇到了一些类似的问题。据我了解，$.widget.extend 中涉及一些克隆操作，它在每个小部件实例中创建一个单独的选项对象。我的解决方法是用函数包装对全局选项对象的访问，并将其传递给小部件。

$.widget("custom.test_widget", {
  options: {
    valueFunc: null
  },
  _getOpts: function() {
    if (typeof this.options.valueFunc==='function') {
      return this.options.valueFunc();
    }
    return {};
  },
  _create: function() {
    var opts = this._getOpts();
    opts['a'] = 10;
  }
});
var widget_value = {};
var opts = function() {
  return widget_value;
}
$('#widget_holder').test_widget({
  valueFunc: opts
});

更新的小提琴：https://jsfiddle.net/kbebqaag/7/

我不知道这是否适合您的用例。

Answer 2

我认为最简单的解决方案是使用单独的函数来设置/修改值。

例：https://jsfiddle.net/erazor/5h5a0wvq/4/

$.widget( "custom.test_widget", {
  options: {
    value: null
  },
  _create: function() {
  },
  setAndMod: function(value) {
    this.options.value=value;
    this.options.value['a']=10;
  }
});
var widget_value={};
console.log('value before widget init',widget_value);
$('#widget_holder').test_widget({});
$('#widget_holder').test_widget('setAndMod',widget_value);
console.log('value after widget init',widget_value);