jQueryプラグインインスタンスがイベントハンドラで変数

Question

私は最初のjQueryプラグインをツリーブラウザとして作成しています。最初にトップレベルの要素を表示し、クリックすると深くなり、レベルに応じて異なる方法で子供を表示します。

私はこれをすでに稼働させています。しかし今、私は "バック"機能を実装したいと思うので、ツリーブラウザの各インスタンスにクリックされた要素の配列を格納する必要があります（複数のページがある場合）。

私はインスタンスのプライベート変数を "this"で置き換えることができます。プラグインで

しかし、onClickのイベントハンドラをトピックに割り当てると、このインスタンスのプライベート変数を取得するにはどうすればよいですか？ $（this）はこの時点でクリックされた要素を参照しています。

私に助言やチュートリアルへのリンクを教えてもらえますか？

私は、イベントハンドラが関与していないインスタンス固有の変数のチュートリアルしか見つかりませんでした。

何か助けていただければ幸いです。

ありがとうございます。

更新：巨大なコード生成を取り除き、論理構造を保持しました。これは私のコードです：

(function ($) { 

$.fn.myTreeBrowser = function (options) { 

    clickedElements = []; 

    var defaults = { 
     textColor: "#000", 
     backgroundColor: "#fff", 
     fontSize: "1em", 
     titleAttribute: "Title", 
     idAttribute: "Id", 
     parentIdAttribute: "ParentId", 
     levelAttribute: "Level", 
     treeData: {} 
    }; 

    var opts = $.extend({}, $.fn.myTreeBrowser.defaults, options); 


    function getTreeData(id) { 
     if (opts.data) { 
      $.ajax(opts.data, { async: false, data: { Id: id } }).success(function (resultdata) { 
       opts.treeData = resultdata; 
      }); 
     } 
    } 

    function onClick() { 

     var id = $(this).attr('data-id'); 

     var parentContainer = getParentContainer($(this)); 

     handleOnClick(parentContainer, id); 
    } 

    function handleOnClick(parentContainer, id) { 
     if (opts.onTopicClicked) { 
      opts.onTopicClicked(id); 
     } 

     clickedElements.push(id); 

     if (id) { 

      var clickedElement = $.grep(opts.treeData, function (n, i) { return n[opts.idAttribute] === id })[0]; 

      switch (clickedElement[opts.levelAttribute]) { 
       case 1: 
        renderLevel2(parentContainer, clickedElement); 
        break; 
       case 3: 
        renderLevel3(parentContainer, clickedElement); 
        break; 
       default: 
        debug('invalid level element clicked'); 
      } 
     } else { 
      renderTopLevel(parentContainer); 
     } 
    } 

    function getParentContainer(elem) { 
     return $(elem).parents('div.myBrowserContainer').parents()[0]; 
    } 

    function onBackButtonClick() { 
     clickedElements.pop(); // remove actual element to get the one before 
     var lastClickedId = clickedElements.pop(); 

     var parentContainer = getParentContainer($(this)); 
     handleOnClick(parentContainer, lastClickedId); 
    } 



    function renderLevel2(parentContainer, selectedElement) { 
     $(parentContainer).html(''); 

     var browsercontainer = $('<div>').addClass('myBrowserContainer').appendTo(parentContainer); 

     //... rendering the div ... 
     // for example like this with a onClick handler 
     var div = $('<div>').attr('data-id', element[opts.idAttribute]).addClass('fct-bs-col-md-4 pexSubtopic').on('click', onClick).appendTo(subtopicList); 

     // ... rendering the tree 

     var backButton = $('<button>').addClass('btn btn-default').text('Back').appendTo(browsercontainer); 
     backButton.on('click', onBackButtonClick); 

    } 


    function renderLevel3(parentContainer, selectedElement) { 
     $(parentContainer).html(''); 

     var browsercontainer = $('<div>').addClass('myBrowserContainer').appendTo(parentContainer); 

     //... rendering the div ... 
     // for example like this with a onClick handler 
     var div = $('<div>').attr('data-id', element[opts.idAttribute]).addClass('fct-bs-col-md-4 pexSubtopic').on('click', onClick).appendTo(subtopicList); 

     // ... rendering the tree 

     var backButton = $('<button>').addClass('btn btn-default').text('Back').appendTo(browsercontainer); 
     backButton.on('click', onBackButtonClick); 

    } 


    function renderTopLevel(parentContainer) { 

     parentContainer.html(''); 

     var browsercontainer = $('<div>').addClass('fct-page-pa fct-bs-container-fluid pexPAs myBrowserContainer').appendTo(parentContainer); 

     // rendering the top level display 

    } 



    getTreeData(); 

    //top level rendering! Lower levels are rendered in event handlers. 
    $(this).each(function() { 
     renderTopLevel($(this)); 
    }); 

    return this; 
}; 



// Private function for debugging. 
function debug(debugText) { 
    if (window.console && window.console.log) { 
     window.console.log(debugText); 
    } 
}; 

}（jQuery））;

Answer 1

もう1つのクラス変数を使用してthisを渡すだけです。通常私はそれをselfと呼びます。だからvar self = this;あなたのプラグインクラスのコンストラクタにあなたは行くのが良いです。

オブジェクト指向の方法：

function YourPlugin(){ 
    var self = this; 
} 

YourPlugin.prototype = { 
    constructor: YourPlugin, 

    clickHandler: function(){ 
     // here the self works 
    } 
} 

Check this Fiddle

かなeventHandlerにデータを渡すための簡単な方法：

$("#foo").bind("click", { 
    self: this 
}, function(event) { 
    alert(event.data.self); 
}); 

Answer 2

あなたはjQueryのプロキシ機能を使用することができます。

$(yourElement).bind("click", $.proxy(this.yourFunction, this)); 

yourFunctionのthisをプラグインのthisとして使用できます。