Durandal Weyland/Requirejs優化與kendo ui dataviz

我正在與Durandal構建一個與PhoneGap綁定的應用程序。當我試圖運行weyland優化器時，我遇到了一些問題。構建和優化運行正常，沒有任何錯誤（我使用requirejs作爲優化器），但是當我運行應用程序時，我的kendo ui圖表會拋出一個錯誤，提示「Uncaught TypeError：Object [object Object] has no method'kendoChart'」。Durandal Weyland/Requirejs優化與kendo ui dataviz

如果我在chrome中調試模式下進行kendoChart綁定，並在控制檯中鍵入「kendo」，我得到kendoobject並可以查看它的屬性等等，所以它肯定在DOM中。

Iv'e谷歌相當多，並發現一些線程在這裏，但沒有人似乎排序我的問題了。例如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); 
    } 
}; 
});

我想補充一點，一切工作正常運行在Web瀏覽器中未優化的代碼（或爲此事電話）。

我也嘗試在配置文件中填充kendo路徑，並添加一個依賴jquery，這似乎沒有任何區別。

任何幫助，將不勝感激！

來源

2014-03-07 aup

您是否嘗試過通過普通腳本標記加載jquery，kendo和knockout，而不是在您的AMD模塊中處理它們？ – RainerAtSpirit

不，我沒有。我會，現在，即使這是一種解決方法，我並不是真的非常滿意:) – aup

對於像劍道這樣的大型框架，它們有自己的一套依賴關係，例如jquery版本，我傾向於不把它們與我自己的AMD模塊捆綁在一起。個人喜好，我知道。看看 – RainerAtSpirit

對於像劍道這樣的大型框架，它們擁有自己的一套依賴關係，例如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中，您必須definejquery和knockout才能使它們可用於Durandal（請參閱main.js），因爲Durandal內部仍在使用它們作爲AMD模塊。

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

謝謝！我正在嘗試這個。我想知道，當我沒有在require.config-部分中定義jQuery的路徑時，如何根據jquery爲腳本設置墊片？另外，我應該如何在weyland配置中設置'define（'jquery'，function（）{return jQuery;}）;'優化？ – aup

先嚐試沒有任何配置，如果weyland/rjs抱怨將jquery和knockout設置爲'空'。 – RainerAtSpirit

我剛剛得到它的工作..不知道它到底是什麼，但我現在直接引用我的自定義綁定中的kendoui腳本，並且我在index.html中添加了jQuery和knockout-script標記像你提議的那樣。謝謝！現在我面臨着一些非常奇怪的事情，這是我之前從未經歷過的。我的一些綁定，在將jquery和knockout移動到索引中的腳本標記之前工作，不再工作。例如，「foreach」綁定在某些地方不起作用，但不會從主內存中引發錯誤：/ – aup

Durandal Weyland/Requirejs優化與kendo ui dataviz

回答

相關問題