kendo-ui - 使用 requirejs 注入(inject) kendo ui

Question

关于 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模块中引入了kendo ui和requirejs，所以我得到了这个异常!

更新

根据 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 :)

});

Answer 1

这取自官方 Kendo 文档 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>

假设 kendo 已正确设置其模块的依赖关系，设置一个类似 k: "http://cdn.kendostatic.com/VERSION/js 的路径，该路径指向模块目录(不是一个单独的模块)，并使用像 k/kendo.grid.min 这样的模块来满足所有需要。