使用requirejs注入kendo ui

时间:2013-09-07 08:20:36

标签: kendo-ui requirejs durandal

关于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,它再次具有依赖性

to kendo.core.min。

如何在加载kendo.grid.min之前和加载jquery之后告诉requirejs加载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 :)

});

1 个答案:

答案 0 :(得分:3)

这取自http://docs.kendoui.com/getting-started/using-kendo-with/using-kendo-with-requirejs

的官方Kendo文档
<!-- 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的模块应该全部这是必需的。