Google Chart API의 넉 아웃 맞춤 바인딩 - 액세스가 거부되었습니다.

Question

저는 몇일 동안이 방법을 시도해 왔으며 구축 된 솔루션에 대한 검색을 시도했지만 슬프게도 성공하지 못했습니다.

사용자 정의 전자 상거래 제품에 대한 관리 섹션을 작성 중입니다. 이 관리 영역은 AJAX 호출을 통해 'ko'템플릿과 해당 데이터를 동적으로로드하는 SPA (단일 페이지 응용 프로그램)로 완전히 구축되었습니다.

차트, 파이 및 기타 데이터 시각화 요소를이 KO 템플릿 (즉, 요약 데이터는 대시 보드 템플릿의 그래프에 멋지게 표시됨) 안에 포함하고 싶습니다.

이것을 위해 나는 올바르게 호출되고있는 Google Chart API에 대한 'KO 사용자 정의 바인딩'작업을하고 있습니다. (에서 KO에 적응 : this sample) 고정 차트를 생성

이것은 내가 지금까지 무엇을 가지고, 템플릿에서,

ko.bindingHandlers.googleChart = { 
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) { 

    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(function() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Revenue'); 
     data.addColumn('number', 'Average Revenue'); 
     data.addRows([ 
      ['2004', 1000, 630], 
      ['2005', 1170, 630], 
      ['2006', 660, 630], 
      ['2007', 1030, 630] 
     ]); 

     var options = { 
      title: 'Revenue by Year', 
      seriesType: "bars", 
      series: { 1: { type: "line" } }, 
      vAxis: { 
       title: 'Year', 
       titleTextStyle: { color: 'red' } 
      }, 
      colors: ['red', 'black'] 
     }; 

     var chart = new google.visualization.ComboChart($(element)); 
     chart.draw(data, options); 
    }); 
}}; 

그리고, 나는, 지금 '거짓'통과, 바인딩 호출 또는 viewModel로부터 임의의 더미 ko.observable

<script type="text/html" id="dashboard-admin-template"> 
    <div data-bind="googleChart: false"></div>  
</script> 

이제, 마지막으로 (너무 오래 걸려서 죄송합니다), 문제 나는 데 :

google.load("visualization", "1", { packages: ["corechart"] });, 후에는 '요소'내용을 내 IDE에서 캡처를 게시 할 수 없습니다 (액세스 할 수 없게 나는 평판 문제에 대해 초보자이기 때문에) 콜백을 실패로 만들고 차트를 렌더링하지 않습니다. 'google.load'를 호출하기 전에 '요소'콘텐츠가 모두 있고 액세스 가능합니다. 그런 다음 콜백이 호출 될 때 Javascript runtime error: Access is denied이 표시됩니다.

내가이 문제에 매달려 있기 때문에 도움을 받기를 바랍니다. 감사! Luis

Answer 1

정답을 다시 알려주세요.

1. 은 사용자 정의 바인딩 코드 자체에 의해 직접 내부 코드를 실행 google.setOnLoadCallback(function()...를 호출
2. 피 밖으로 google.load("visualization"...을 가져 가라.

다음은 지금 어떻게 결합 외모 ...

이 당신이 유사한 문제에 대한 작업의 도움

google.load("visualization", "1", { packages: ["corechart"] }); 
ko.bindingHandlers.googleChart = { 
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) { 

    //TODO: load & handle visualization data using the 'valueAccessor' 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Revenue'); 
    data.addColumn('number', 'Average Revenue'); 
    data.addRows([ 
     ['2004', 1000, 630], 
     ['2005', 1170, 630], 
     ['2006', 660, 630], 
     ['2007', 1030, 630] 
    ]); 

    var options = { 
     title: 'Revenue by Year', 
     seriesType: "bars", 
     series: { 1: { type: "line" } }, 
     vAxis: { 
      title: 'Year', 
      titleTextStyle: { color: 'red' } 
     }, 
     colors: ['red', 'black'] 
    }; 

    var chart = new google.visualization.ComboChart(element); 
    chart.draw(data, options); 
}}; 

희망입니다!