1

_create 関数内に jQuery UI 関数があるvar self = thisので、プラグイン内の他の関数からプラグイン コンテキストにアクセスできます。

_create 関数内に次のコードもあります。

//setup sortable handler
if (self.options.sortable !== false) {

     var soptions = {
         items:'.tagit-choice',
         containment:'parent',
         start:function (event, ui) {
             console.log('sorting started', event, ui);
             self._sortable.tag = $(ui.item);
             self._sortable.origIndex = self._sortable.tag.index();
         },
         update:function (event, ui) {
             console.log('sorting started', event, ui);
             self._sortable.newIndex = self._sortable.tag.index();
             self._moveTag(self._sortable.origIndex, self._sortable.newIndex);
             console.log('moved tag', self._sortable.origIndex, 'to', self._sortable.newIndex);

         }
     };

     if (self.options.sortable == 'handle') {
         $('.tagit-choice', this.element).prepend('<a class="ui-icon ui-icon-grip-dotted-vertical" style="float:left"></a>');
         soptions.handle = 'a.ui-icon';
         soptions.cursor = 'move';
     }

     self.element.sortable(soptions);
 }

プラグイン内でソート可能に設定します。

プラグインインスタンスであると予想されるself._moveTag内部で呼び出している場所への呼び出しがありますが、代わりに. どうしてこれなの？console.log(self)selfDOMWindow

_moveTag: function (old_index, new_index) {
    console.log(self);
    self.tagsArray.splice(new_index, 0, self.tagsArray.splice(old_index, 1)[0]);
    for (var ind in self.tagsArray)
        self.tagsArray[ind].index = ind;

    if(self.options.select){
        $('option:eq(' + old_index + ')', this.select).insertBefore($('option:eq(' + new_index + ')', this.select));
    }
},

うまくいけば、この例はより明確です:

(function($) {

    $.widget("ui.widgetName", {

        options: {
            sortable: true
        },

        _sortable: {},

        _create: function() {

            var self = this;

            if (self.options.sortable !== false) {
                self.element.sortable({
                    items: '.tagit-choice',
                    containment: 'parent',
                    start: function(event, ui) {
                        self._sortable.tag = $(ui.item);
                        self._sortable.origIndex = self._sortable.tag.index();
                    },
                    update: function(event, ui) {
                        self._sortable.newIndex = self._sortable.tag.index();
                        self._moveTag(self._sortable.origIndex, self._sortable.newIndex);
                    }
                });
            }
        },

        _moveTag: function(old_index, new_index) {
            console.log(self); // <-- this returns DOMWindow?!?!?
        }
    });
})(jQuery);​
4

1 に答える 1

2

self内部で定義されることを期待するのはなぜ_moveTagですか? どうやら誰かが中に漏れているselfようで、あなたは内部window.selfの悪いものを拾っています。次のようなものが与えられます：self_moveTagselfwindow

(function($) {
    $.widget('ui.pancakes', {
        _create: function() {
            var self = this;
            self._moveTag();
        },
        _moveTag: function() {
            // ...
        }
    });
})(jQuery);

self内部_createはあなたが望むウィジェットですselfが、それはselfの範囲外で_moveTagあり、どこか別の場所から_moveTagリークされたものを拾っています。内部および内部で定義された任意の関数window.selfを使用でき、期待どおりの結果が得られます。しかし、( のスコープ内ではなく) 通常の方法でウィジェット メソッドとして定義されているため、悪いアウターをピックアップし、それは.self_create_create_moveTag_createselfselfwindow

あなたの私的な_moveTags方法はself悪用の罪を犯していると思います。ウィジェット メソッド内で使用thisし、呼び出し元が正しいコンテキストを使用していることを確認する必要があります。_moveTagjQuery-UI は適切なコンテキストでパブリック メソッドを呼び出すので、プライベート メソッド ( など) を自分で非常に簡単に処理できるはずです。

説明のための簡単なデモを次に示します: http://jsfiddle.net/ambiguous/UhE3F/

少し調べてみると、衝撃的な事実が明らかになりました:にはプロパティwindowがあるはずです:self

window.self

ウィンドウ オブジェクトへのオブジェクト参照を返します。

var self = thisそして、慣習はこれまでで最悪のアイデアの1つであるか、少なくともこれに名前を使用することはひどいアイデアであることが判明しましたself. これは、紛らわしいバグの素晴らしいソースです。

于 2012-05-06T07:13:18.293 に答える