0

ウィジェットファクトリを使用してjQueryウィジェットを開発してきました。

同じページ上の複数のDOM要素でウィジェットをインスタンス化すると、オプションオブジェクトを除いて、ウィジェット内のすべてのオブジェクトがDOM要素間で共有されることに気付いた以外はすべて問題ありません。

すべてのオブジェクトと関数には、ウィジェット内に独自のインスタンスがあると思いました。私は明らかに何かが欠けているので、いくつかのガイダンスをいただければ幸いです。

例えば：

(function($) {
  $.widget("a07.BearCal", {
    options: { className : "test" },
    _glbl: { something: "" },
    _create: function() {
      this._glbl.something = this.element.attr('class');
      this.options.className = this.element.attr('class');
    },
  });
})(jQuery);

// Instantiate widget on .full
$('.full').BearCal();

//Should output full
console.log($('.full').data('BearCal')._glbl.something);

//Should output full
console.log($('.full').data('BearCal').options.className);

// Instantiate widget on .mini
$('.mini').BearCal();

//Should output mini
console.log($('.mini').data('BearCal')._glbl.something);

//Should output mini
console.log($('.mini').data('BearCal').options.className);

//Should output full but outputs mini
console.log($('.full').data('BearCal')._glbl.something);

//Should output full
console.log($('.full').data('BearCal').options.className);​

この実例：http：//jsfiddle.net/NrKVP/4/

前もって感謝します！

4

1 に答える 1

2

ウィジェットのプロパティ：

$.widget("a07.BearCal", {
  // The stuff in here...
});

ウィジェットのプロトタイプに接続します。ウィジェットファクトリはoptions、ウィジェットごとにそれらを複製する必要があることを認識しており、認識していますoptions。ウィジェットファクトリがこの動作を調整するため、期待どおりに動作しています。ウィジェットファクトリは何も知らない_glblため、プロトタイプに残され、ウィジェットのすべてのインスタンスで共有されます。

_glblウィジェットごとのコピーが必要な場合は、自分自身を複製できます。

  this._glbl = { something: this.element.attr('class') };

_glblこれにより、ウィジェットごとに異なるオブジェクトが提供されます。

デモ： http： //jsfiddle.net/ambiguous/UX5Zg/

_glblより複雑な場合は、それ$.extendをコピーしてマージするために使用できますsomething。

this._glbl = $.extend(
  { },
  this._glbl,
  { something: this.element.attr('class') }
);

ディープコピーが必要な場合trueの最初の引数として使用することをお勧めします。$.extend空のオブジェクト、は、すべてを最初のオブジェクト引数にマージする{ }ために必要であり、新しいコピーが必要です。$.extend

デモ： http： //jsfiddle.net/ambiguous/pyUmz/1/

于 2012-10-21T05:06:12.937 に答える