Highcharts는 오류를 발견하지하지만 컨테이너는

Question

난 그냥 내 응용 프로그램과 함께 사용하는 높은 차트를 배선하고있어 내가 사용하고있는 : 녹아웃 3.0, require.js 2.1을 3.0 부트 스트랩 jquery 2.1 안에 있습니다. 나는이처럼 내 require.config 파일에 높은 차트에서 유선 :

requirejs.config(
    baseUrl: 'thirdparty', 
    packages: [ 
     ...... 
     {name: 'Highcharts', location: 'highcharts', main: 'highcharts.js'} 
    ], 
    paths: { 
     'jquery': 'jquery/jquery', 
     'highcharts': 'highcharts/highcharts.exporting.module', 
     'highcharts-theme': 'highcharts/dark-blue', 
     'highcharts-module': 'highcharts/highcharts' 
    }, 
    shim: { 
     'highcharts-module': {exports: 'Highcharts', deps: ['jquery']}, 
     'highcharts-theme': ['highcharts-module'], 
     'highcharts': {deps: ['highcharts-module', 'highcharts-theme'], exports: 'Highcharts'} 
    } 
); 

이 내 녹아웃보기 모델 :

define(['jquery', 'knockout', 'Highcharts'], function($, ko){ 
    return function MyViewModel(){ 
     var self = this; 
     self.chartOptions = {.....} // copy pasted stuff from one of the examples 
     self.drawChart = function(){ 
      #("#container").highchart(self.chartOptions); 
     } 
     self.drawChart(); 
    } 
}); 

ko.applyBinds이 VM의 부모에서 이루어집니다. 나는 브라우저를 다시로드 할 때

<div class="row"> 
<div class="col-md-10"> 
    <div class="well container"> 
     <div id="container"></div> 
    </div> 
</div> 
</div> 

, 나는이 오류가 :

** Highcharts 오류 # 13 : www.highcharts.com/이는 prettymuch, 내 HTML 템플릿 내부 사업부와 컨테이너입니다 오류/13 ** 모든 도움을 주시면 대단히 감사하겠습니다. 고맙습니다.

Answer 1

좋습니다. Esteban의 제안 덕분에 VM의 코드가 실행될 때 div가로드되지 않은 이유를 알 수있었습니다. 녹아웃에 맞춤 바인딩 처리기를 추가하여 문제를 해결했습니다.

ko.bindingHandlers.initHighCharts ={ 
     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
      var val = ko.unwrap(valueAccessor()); 
      if(val.data){ 
       try { 
        $(element).highcharts(val.data); 
       } catch(e){ 
        console.log(e); 
       } 
      } 
     }, 
     update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 

     } 
    }; 

하고 HTML 템플릿에 이런 짓을 :

<div class="row"> 
<div class="col-md-10 no-margin"> 
    <div class="well container"> 
     <div data-bind="initHighCharts: {data: chartingOptions}"></div> 
    </div> 
</div> 
</div> 

사용자 지정 바인딩 사업부가로드 된 후 발생하는 VM의 코드를합니다.