$ .extend(). each() 함수에서 이상한 동작이 발생합니까?

이것은 Highcharts API의 래퍼 (wrapper)로서의 나의 플러그인의 끝이다. 나는 현재 id 속성에 chart.renderTo 속성을 설정하는 each() 함수 안에 extend()을 사용하고 있습니다.

그러나이 작동하지 않습니다. console.log($(this).attr('id'))의 출력은 정확하지만 console.log(opt.chartOptions)은 chart.renderTo 속성으로 마지막 ID (차트 2) 만 표시합니다.

$.extend() jQuery 기능에 대해 뭔가 부족합니다.

var chartOptions = {}; // Plain option object 

    return this.each(function() { // Each div 

     console.log($(this).attr('id')); // Output: "chart1", "chart2" 
     $.extend(opt.chartOptions, { chart : {renderTo : $(this).attr('id') } }); 
     console.log(opt.chartOptions); // Ops! chart.renderTo is always "chart2" 

     $.ajax({ 
      url : opt.url, 
      type : 'POST', 
      data : opt.data, 
      dataType : 'json', 
      success : function(data) { 
       $.extend(data, opt.chartOptions); // Merge data from server 
       new Highcharts.Chart(data); 
      } 
     }); 

    });

출처

2012-01-10 gremo

나는 opt.chartOptions 변수는 플러그인 기능에 로컬로 범위가 있으리라 믿고있어. 그것이 사실이라면 여기에서 당신이하는 일은 래퍼 컨텍스트에서 div 각각에 대해 opt.chartOptions을 확장하려고하는 것입니다.

확장을 반복 할 때마다 (예 : $.extend(foo,bar)) jQuery는 foo의 속성을 bar까지 확장합니다. 네가 알고 있다는 것을 나는 확신한다.

아마도 누락 된 것은 bar은 항상 { chart : {} } 양식의 개체입니다. 짧게 말해서, .each()의 모든 반복은 이전 $.extend() 호출을 덮어 쓰고 있습니다. 첫 번째 반복을 통해

는 opts.chartOptions은 당신의 .each() 컨텍스트의 첫 번째 div 계산됩니다 opts.chartOptions.chart로 연장됩니다. 두 번째 반복을 통해

, 당신은 opts.chartOptions.chart, 이미있다 다시 opts.chartOptions을 확장하려고 할 것입니다. 하지만 jQuery는 상관하지 않으므로 div의 계산 된 값 중 두 번째를 div의 값인 opts.chartOptions.chart에 할당합니다.

기타 등등.

여기에서 사용하는 방식은 이며, 일반적으로은 중요하지 않습니다. AJAX의 콜백 기능에서 opts.chartOptions 값을 사용하고 있기 때문에 여기에 해당합니다. 이 경우 클로저이 opts.chartOptions에 생성됩니다. 즉, AJAX의 콜백이 발생할 때까지 그 값은 기대 한 바가 아닐 수 있습니다 (다른 반복에 의해 .each(), blah blah로 수정되었을 수 있음).

WHEW !!

출처

2012-01-10 03:16:20

$ .extend(). each() 함수에서 이상한 동작이 발생합니까?

답변

관련 문제