用requirejs注入kendo ui [英] Inject kendo ui with requirejs

问题描述

关于kendo ui和requirejs的文档似乎缺少一些内容.

他们告诉我如何使用包含所有内容的kendo.web.min:

http://www.kendoui. com/blogs/teamblog/posts/13-05-08/requirejs-fundamentals.aspx

(搜索关键字"shim")

但是我对添加2MB较大的kendo.web.min脚本不感兴趣，我只想填充

kendo.grid.min，但是此文件与kendo.data.min具有依赖关系，而kendo.data.min又具有依赖关系

到kendo.core.min.

我如何告诉requirejs在kendo.grid.min加载之前和jquery加载之后也加载kendo.data.min和kendo.core.min.我只是猜想这将是正确的顺序.

这是我从上面的telerik链接中尝试过的:

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout': '../Scripts/knockout-2.3.0',
        'jquery': '../Scripts/jquery-2.0.3',     
        'kendoGrid': '../Scripts//kendo.grid.min',
    },
    shim: {
        "kendoGrid": {
            deps: ["jquery"]
        }
    }
});

定义kendo.data和kendo.core之类的kendo依赖关系的正确方法是什么?

此刻，我在systems.js中从durandal的应用程序启动中遇到了异常:

无法加载组成的模块(viewmodels/DocumentBrowser).详细信息:不能'访问'未定义或空引用的属性\"jQuery \".

我知道此错误不是直接与kendo有关，但是由于我在DocumentBrowser模块中引入了带有requirejs的kendo ui，所以我得到了这个异常！

更新

根据CodingWhitSpike的建议，我更改了我的requirejs配置:

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout': '../Scripts/knockout-2.3.0',
        'jquery': '../Scripts/jquery-2.0.3',
        'moment': '../Scripts/moment',
         k: "../Scripts/kendo"
    }
});

define(['durandal/app', 'plugins/dialog', 'knockout', 'services/dataservice', 'plugins/router', 'moment', 'k/kendo.grid.min'],
    function (app, dialog, ko, dataservice, router, moment, kendoGrid) {

 $("#grid").kendoGrid(...); => kendoGrid is instantiated and it works :)

});

解决方案

这取自官方Kendo文档，网址为

假设kendo正确设置了其模块的依赖关系，则只需设置k: "http://cdn.kendostatic.com/VERSION/js之类的路径，该路径指向modules目录(不是一个单独的模块)，并使用像k/kendo.grid.min这样的模块就可以了. /p>

The documentation on kendo ui and requirejs seems to miss some stuff.

They tell me how to use kendo.web.min which have everything included:

http://www.kendoui.com/blogs/teamblog/posts/13-05-08/requirejs-fundamentals.aspx

(search for keyword 'shim')

but I am not interested in adding the big 2MB kendo.web.min script, I just want to shim the

kendo.grid.min but this file has a dependency to kendo.data.min which again has a dependency

to kendo.core.min.

How can I tell requirejs to load also kendo.data.min and kendo.core.min before kendo.grid.min is loaded and after jquery has been loaded. I just guess this would be the correct order.

This is what I have tried from the above telerik link:

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout': '../Scripts/knockout-2.3.0',
        'jquery': '../Scripts/jquery-2.0.3',     
        'kendoGrid': '../Scripts//kendo.grid.min',
    },
    shim: {
        "kendoGrid": {
            deps: ["jquery"]
        }
    }
});

What is the correct way of defining the kendo dependencies like kendo.data and kendo.core ?

At the moment I am getting an exception on application startup from durandal in the systems.js saying:

"Failed to load composed module (viewmodels/DocumentBrowser). details: The property \"jQuery\" of an undefined or null reference can not be 'accessed'.

I know this error is not directly about kendo, but since I introduced kendo ui with requirejs in the DocumentBrowser module I get this exception!

UPDATE

According to CodingWhitSpike`s advise I have changed my requirejs configuration:

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout': '../Scripts/knockout-2.3.0',
        'jquery': '../Scripts/jquery-2.0.3',
        'moment': '../Scripts/moment',
         k: "../Scripts/kendo"
    }
});

define(['durandal/app', 'plugins/dialog', 'knockout', 'services/dataservice', 'plugins/router', 'moment', 'k/kendo.grid.min'],
    function (app, dialog, ko, dataservice, router, moment, kendoGrid) {

 $("#grid").kendoGrid(...); => kendoGrid is instantiated and it works :)

});

解决方案

This is taken from the official Kendo docs at http://docs.kendoui.com/getting-started/using-kendo-with/using-kendo-with-requirejs

<!-- first, load RequireJS -->
<script src="require.js"></script>

<!-- configure RequireJS with two logical paths:
     - "app/" will be used for your files
     - "k/" will be for Kendo UI modules -->

<script>
  requirejs.config({
      paths: {
          app: "/path/to/your/files",
          k: "http://cdn.kendostatic.com/VERSION/js"
      }
  });

  require([
      "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",
      "app/foo",
      "app/bar",
      "k/kendo.menu.min",
      "k/kendo.grid.min"
  ], initApp);

  function initApp() {
     // main entry point of your application
  }
</script>

Assuming that kendo has set up dependencies of their modules correctly, setting up a path like k: "http://cdn.kendostatic.com/VERSION/js which points to the modules directory (NOT one individual module) and use a module in like k/kendo.grid.min should all that's required.

这篇关于用requirejs注入kendo ui的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！