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

回答

相关问题