Durandal Weyland/Requirejs optimizer with kendo ui dataviz

Durandal을 사용하여 PhoneGap과 함께 번들로 앱을 제작하고 있습니다. weyland optimizer를 실행할 때 몇 가지 문제가 있습니다. 빌드 및 최적화가 오류없이 잘 실행됩니다 (최적화 도구로 requirejs를 사용하고 있습니다).하지만 응용 프로그램을 실행할 때 내 검도 UI 차트에 "잡히지 않은 TypeError : 개체 [개체 개체]에"kendoChart '메서드가 없습니다 "라는 오류가 발생합니다." .Durandal Weyland/Requirejs optimizer with kendo ui dataviz

kendoChart 바인딩이 발생하는 Chrome에서 디버그 모드로 일시 중지하고 콘솔에 "kendo"를 입력하면 나는 kendoobject를 얻고 그 속성 등을 볼 수 있으므로 확실히 DOM에있게됩니다.

Iv'e google 주위에 상당히 약간의 스레드를 발견했지만 그들 중 아무도 내 문제를 정렬하는 것 같습니다. 예를 들어 this thread 또는 this one입니다.

아래에 제공된 차트에 맞춤 녹아웃 바인딩이 있습니다.

내 weyland.config은 다음과 같습니다

exports.config = function (weyland) { 
weyland.build('main') 
    .task.jshint({ 
     include: 'App/**/*.js' 
    }) 
    .task.uglifyjs({ 
     // not uglyfying anything now... 
     //include: ['App/**/*.js', 'Scripts/durandal/**/*.js', 'Scripts/custom/**/*.js'] 
    }) 
    .task.rjs({ 
     include: ['App/**/*.{js,html}', 'Scripts/custom/**/*.js', 'Scripts/jquery/*.js', 'Scripts/durandal/**/*.js'], 
     exclude: ['Scripts/jquery/jquery-2.0.3.intellisense.js', 'App/main.js'], 
     loaderPluginExtensionMaps: { 
      '.html': 'text' 
     }, 
     rjs: { 
      name: 'main', 
      baseUrl: 'App', 
      paths: { 
      'text': '../Scripts/text', 
      'durandal': '../Scripts/durandal', 
      'plugins': '../Scripts/durandal/plugins', 
      'transitions': '../Scripts/durandal/transitions', 

      'knockout': '../Scripts/knockout/knockout-2.3.0', 
      'kendo': 'empty:', <-- tried refering kendo.all.min, or dataviz.chart or the path 
      'jquery': '../Scripts/jquery/jquery-2.0.3.min', 
      'Helpers': '../Scripts/custom/helpers', 


       ........ other scripts ...... 
      }, 
      deps: ['knockout', 'ko_mapping', 'command'], 
      callback: function (ko, mapping, command) { 
       ko.mapping = mapping; 
      } 
      //findNestedDependencies: true, **<-- tried both true and false here** 
      inlineText: true, 
      optimize: 'none', 
      pragmas: { 
       build: true 
      }, 
      stubModules: ['text'], 
      keepBuildDir: false, 
      out: 'App/main-built.js' 
     } 
    }); 
}; 
    // The custom binding for the kendo chart 
define([ 
    'knockout', 
    'jquery', 
    'Helpers', 
    'kendo/kendo.dataviz.chart.min' 
    ], function (
    ko, 
    $, 
    helpers, 
    kendoui 
    ) { 
    function drawChart(element, values, options) { 
     $(element).kendoChart({ **<-- this is where I get an error** 
      ... options for chart ... 
     }); 
    } 

// kendoUi data viz chart 
ko.bindingHandlers.moodChart = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     //set the default rendering mode to svg 
     kendo.dataviz.ui.Chart.fn.options.renderAs = "svg"; **<-- this renders no errors** 
     // if this is a mobile device 
     if (kendo.support.mobileOS) { 
      // canvas for chart for you! 
      kendo.dataviz.ui.Chart.fn.options.renderAs = "canvas"; 
     } 

     var values = ko.unwrap(valueAccessor()); 

     setTimeout(function() { 
      drawChart(element, values); 
     }, 125); 
    } 
}; 
});

나는 모든 웹 브라우저에서하지 최적화 된 코드 (또는 그 문제에 대한 전화)를 실행 잘 작동하는 것이 추가 할 수 있습니다.

나는 또한 구성 파일에서 검도 경로를 shim하고 jquery에 종속성을 추가하려고 시도했지만 실제로는 차이가없는 것으로 보인다.

도움이 될 것입니다.

출처

2014-03-07 aup

일반 스크립트 태그를 통해 jquery, kendo 및 knockout을로드하고 AMD 모듈에서 전혀 처리하지 않으셨습니까? – RainerAtSpirit

아니요. 이제는 이것으로 해결할 수 있지만, 실제로는별로 행복하지는 않습니다. – aup

kendo와 같은 대규모 프레임 워크의 경우 의존성 집합이 있습니다. jquery 버전, 나는 그들 자신의 AMD 모듈과 함께 묶지 않는 경향이있다. 개인 취향, 알아. – RainerAtSpirit

kendo와 같은 대규모 프레임 워크의 경우 종속성 자체가 있습니다. jquery 버전, 나는 그들 자신의 AMD 모듈과 함께 묶지 않는 경향이있다. 개인 취향, 알아. 당신이 .NET example

<body> 
     <div id="applicationHost"></div> 

     <script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script> 

     <script type="text/javascript" src="~/Scripts/whateverKendoVersionGoesHere.js"></script> 

     <script type="text/javascript" src="~/Scripts/knockout-2.3.0.js"></script> 
     <script type="text/javascript" src="~/Scripts/bootstrap.js"></script> 

     <script type="text/javascript" src="~/Scripts/require.js" data-main="/App/main"></script> 
    </body>

그 방법 JQuery와 정상 스크립트 태그를 통해 JQuery와, 녹아웃 및 검도를로드 할 수 및 녹아웃 전역으로로드되는 방법을 살펴 보자. main.js에서 Durandal은 내부적으로 AMD 모듈로 사용하기 때문에 Durandal (main.js 참조)을 사용할 수 있으려면 definejquery 및 knockout을 사용해야합니다.

requirejs.config({ 
    paths: { 
     'text': '../Scripts/text', 
     'durandal': '../Scripts/durandal', 
     'plugins': '../Scripts/durandal/plugins', 
     'transitions': '../Scripts/durandal/transitions' 
    } 
}); 

define('jquery', function() { return jQuery; }); 
define('knockout', ko); 

define(['durandal/system', 'durandal/app', 'durandal/viewLocator'], function (system, app, viewLocator) { 
    ... 
});

출처

2014-03-08 10:56:40 RainerAtSpirit

고맙습니다! 나는 지금 이것을 시도하고있다. 내가 궁금하네요, 어떻게 jquery jquery에 대한 require.config - 섹션 경로를 정의하지 않는 경우에 따라 스크립트에 대한 shims 설정합니까? 또한 최적화를 위해 weyland 설정에서'define ('jquery', function() {return jQuery;});를 어떻게 설정해야합니까? – aup

먼저 구성을 시도하지 않고 weyland/rjs가 jquery를 설정하고 knockout을 'empty'로 설정하면 오류가 발생합니다. – RainerAtSpirit

방금 작업했는데 정확히 무엇을했는지 모르겠지만 이제는 내 사용자 정의 바인딩에서 직접 kendoui 스크립트를 참조하고 index.html에 jQuery 및 knockout 스크립트 태그를 추가했습니다. 네가 제안한 것처럼. 감사! 나는 지금까지 경험하지 못했던 매우 이상한 것을 만나고있다. jquery와 knockout을 인덱스의 스크립트 태그로 이동하기 전에 작업 한 바인딩 중 일부는 더 이상 작동하지 않습니다.예를 들어 "foreach"바인딩은 일부 장소에서 작동하지 않지만 기본 빌드에서 오류가 발생하지 않습니다./ – aup

Durandal Weyland/Requirejs optimizer with kendo ui dataviz

답변

관련 문제