2017-01-14 13 views
0

これは本当にシンプルで、私は「木の木」という瞬間があるように感じますが、その瞬間は1日以上続いています。 !私はこれをgoogledして、SOの答えの多くを読んで、しかし、私は私の問題を正確に自分の欠点のために疑いの余地はないと私は見た答えを適用している。 jQueryプラグイン変数として関数を受け入れ、パラメータを返す

は、問題を説明するために、私は(私はこれのためにフィドルを作成しようとしましたが、バイオリンで「ページ」にプラグインの外部を含める方法がわからない)このサンプルjQueryプラグインを持っている:

(function ($) { 

    $.fn.test = function (options) { 
     var settings = $.extend({ 
      onItemClick: function() { }, 
      itemArray: new Array(), 
     }, options); 

     for (i = 0; i < settings.itemArray.length; i++) { 
      var $item = $("<li></li>"); 
      $item.html(settings.itemArray[i].itemLabel); 
      $item.click(function() { 
       settings.onItemClick.call(settings.itemArray[i]); 
      }); 
      this.append($item); 
     } 

     return this; 

    }; 

}(jQuery)); 

ご覧のとおり、私は変数onItemClickとして関数を受け入れています。私はこれが存在し、簡潔さのための機能であるというテストを中止しました。

私の例のページには、次のようになります。

<body> 
    <div> 
     <ul id="testList"></ul> 
    </div> 
</body> 
</html> 

<script type="text/javascript"> 
    $(function() { 

     var testDataArray = new Array(); 

     var itemLabel = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; 
     var itemDate = ["2017-01-03", "2015-08-03", "2016-06-21", "2016-12-20", "2013-09-07"]; 

     for (i = 0; i < itemDate.length; i++) { 
      var testData = {}; 
      testData["itemLabel"] = itemLabel[i]; 
      testData["itemDate"] = itemDate[i]; 

      testDataArray[i] = testData; 
     }; 

     $("#testList").test({ 
      itemArray: testDataArray, 
      onItemClick: function (item) {     
       alert(item.itemLabel + ": " + item.item.Date); 
      } 
     }); 
    }) 
</script> 

をので、私は私のページからプラグインを呼び出すときに、私は、パラメータとして関数を渡すと、その関数内の変数を含めることができることができるようにしたいですプラグインによって実際の値が入力されます。その最後のポイントは私が立ち往生しているところです。

私が書いたコードはそのまま動作しません。当然のことながら、それはエラーがスローされます

settings.itemArrayは私がのクリックイベントにアタッチしようとしている機能の範囲内で知られていないため、未定義

のプロパティ「itemDate」を読み取ることができませんアイテム。私は理解している、私はちょうどこれを行う正しい方法が理解できない!

+0

このため – GProst

答えて

1

ここには動作するスニペットがあります。

あなたは正しい経路にいました。

  1. 私はあなたがこのようにプラグインから関数を呼び出すときに最初 引数は settings.onItemClick.call(undefined, itemToSend);
  2. のように undefinedする必要がありますプラグイン
  3. onItemClickコールバック関数 に引数「アイテム」を追加のです
  4. あなたのプラグインはdomに多数のリスト項目を作成しますが、 元のクリック機能では、配列項目を選択すると を区別することはできません。この理由から、すべてがarrayitem 5として に戻っていたので、このバージョンでは、リストアイテム のインデックスがチェックされ、これを使用して配列アイテム を選択するか、または配列アイテムのコンテンツをドーム データ属性を介した要素は、アラート機能は、クリック機能は、forループと セレクタの外に移動されている代わりに item.itemDate
  5. item.item.Dateと呼ば
  6. (コメントとして)できるように、プラグインのメインセレクターに関連付けられています 複数のリスト

これは願っています。

(function($) { 
 

 
    $.fn.test = function(options) { 
 
    var settings = $.extend({ 
 
     onItemClick: function(item) { 
 

 
     }, 
 
     itemArray: [], 
 
    }, options); 
 

 

 
    var arrayItems = settings.itemArray; 
 

 
    for (i = 0; i < arrayItems.length; i++) { 
 
     var $item = $("<li></li>"); 
 
     $item.html(arrayItems[i].itemLabel); 
 

 
     // $item.html(arrayItems[i].itemLabel).data('arrayItems', arrayItems[i]); 
 

 
     this.append($item); 
 
    } 
 
    $('li', this).click(function() { 
 
     var indx = $(this).index(), 
 
     itemToSend = arrayItems[indx]; 
 
     // var itemToSend = $(this).data('arrayItems'); 
 
     settings.onItemClick.call(undefined, itemToSend); 
 
    }); 
 
    return this; 
 

 
    }; 
 

 
}(jQuery)); 
 

 
// copy everything above to a separate file and call via html 
 

 

 
$(function() { 
 

 
    var testDataArray = []; 
 

 
    var itemLabel = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; 
 
    var itemDate = ["2017-01-03", "2015-08-03", "2016-06-21", "2016-12-20", "2013-09-07"]; 
 

 
    for (i = 0; i < itemDate.length; i++) { 
 
    var testData = {}; 
 
    testData.itemLabel = itemLabel[i]; 
 
    testData.itemDate = itemDate[i]; 
 

 
    testDataArray[i] = testData; 
 
    }; 
 

 
    $("#testList").test({ 
 
    itemArray: testDataArray, 
 
    onItemClick: function(item) { 
 
     console.log(item.itemLabel + ": " + item.itemDate); 
 
    } 
 
    }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- <script src="/test.js"></script> --> 
 

 
<div> 
 
    <ul id="testList"></ul> 
 
</div>

+0

どうもありがとうございました[plunker](https://plnkr.co)の例を作成します。このソリューションは、アレイのオブジェクトの値をコンソールに書き込むアイテムのクリックイベントで、望ましい効果をもたらします。しかし、私はそれが私が尋ねようとしていた質問に答えるとは思わない - おそらく私はそれをはっきりと説明しなかっただろう!私の例では、警告を表示するコードは、プラグインではなくページにあります。これは重要です。私が欲しいのは、プラグインが、開発者がそのページを書いているものが、フィットとして見たときに使用できる変数としてそのアイテムを返すことです。これは、私がやろうとしていることの例です:https://fullcalendar.io/docs/selection/select_callback/ –

+0

答えは編集するように編集しました。コードを変更する必要はなく、プラグインスクリプトを別のファイルに移動してhtmlで呼び出すだけで済みます。明細変数データは、必要に応じて前後に渡されます。ページスクリプトの 'onItemClick'関数は、あなたが信じた後のコールバック関数と同じです。あなたのプラグインは既にプライベート関数として書かれ、構造化されているので、同じページにあっても、別のファイルから呼び出されても、プラグインが呼び出される前にロードされている限り動作します。 – Sam0

+0

もう一度ありがとうございます。この疑問を定式化するために私の実生活の問題を過度に単純化したことに気付きました。私の疑問を完全に解決し、実際のコードではうまくいきません。しかし、あなたは間違いなく適切なトラックを1つ置きます。要素をレンダリングして元の配列からオブジェクトを参照した後にクリックハンドラをアタッチできることを理解することが重要でした。私がやったことは、各要素(この例では "item")に関連する配列からDOM要素の.data()にオブジェクトを追加することで、後で参照しやすくなります。 –

関連する問題