Question

在使用Aurelia-KendoUI Bridge和ASP.NET MVC时，我正在尝试正确加载Kendo Grid。在浏览器的网络列表中，我收到三个404错误：

localhost:33126/Home/node_modules/aurelia-kendoui-bridge/dist/amd/grid/grid.js
localhost:33126/Home/node_modules/aurelia-kendoui-bridge/dist/amd/grid/col.js
localhost:33126/Home/node_modules/aurelia-kendoui-bridge/dist/amd/grid/grid-toolbar.js

问题是node_modules的路径，它位于root上。正确的路径就是这个（没有Home）：

localhost:33126/node_modules/aurelia-kendoui-bridge/dist/amd/grid/grid.js
localhost:33126/node_modules/aurelia-kendoui-bridge/dist/amd/grid/col.js
localhost:33126/node_modules/aurelia-kendoui-bridge/dist/amd/grid/grid-toolbar.js

我按照这样安装了Aurelia-CLI：
https://aurelia-ui-toolkits.gitbooks.io/kendo-ui-sdk-installation/content/installation/installing%20the%20bridge/requirejs.html
并使用基于此的网格：
http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid-basic-use

我更改了\ aurelia_project \ aurelia.json（第56行），以获取app-bundle.js的正确路径：

build/targets/
"useAbsolutePath": true

ASP.NET MVC页面的内容View \ Home \ Grid.cshtml：

<div aurelia-app="main-grid">
    <script src="~/scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>    
    <div class="message">Grid loading...</div>    
</div>

\ src \ main-grid.js的内容：

import environment from './environment';

Promise.config({
    longStackTraces: environment.debug,
    warnings: {
        wForgottenReturn: false
    }
});

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .feature('resources')
        .plugin('aurelia-dialog')
        .plugin('aurelia-kendoui-bridge', kendo => kendo.kendoGrid());

    if (environment.debug) {
        aurelia.use.developmentLogging();
    }

    if (environment.testing) {
        aurelia.use.plugin('aurelia-testing');
    }

    aurelia.start().then(() => aurelia.setRoot('grid/app'));
}

\ src \ grid \ app.js的内容：

export class App {

    constructor() {
        this.datasource = {
            type: 'odata',
            transport: {
                read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
            },
            pageSize: 5
        };
        this.pageable = {
            refresh: true,
            pageSizes: true,
            buttonCount: 10
        };
    }
}

\ src \ grid \ app.html的内容：

<template>
    <require from="./app.css"></require>

    Kendo Grid started!
    <br />

    <ak-grid k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true">
        <ak-col k-title="Contact Name" k-field="ContactName">
            <ak-template>
                <div class='customer-photo' style="background-image: url('http://demos.telerik.com/kendo-ui/content/web/Customers/${CustomerID}.jpg');"></div>
                <div class='customer-name'>${ContactName}</div>
            </ak-template>
        </ak-col>
        <ak-col k-title="Contact Title" k-field="ContactTitle"></ak-col>
        <ak-col k-title="Company Name" k-field="CompanyName"></ak-col>
        <ak-col k-field="Country"></ak-col>
    </ak-grid>

</template>

是否有某种方法可以配置node_modules的路径，忽略或替换ASP.NET MVC路由？

Answer 1

看起来主要的问题是vendor-bundle.js中缺少某些kendoui-bridge组件。不正确的相对网址是其症状，因为RequireJS加载程序尝试在“缓存未命中”之后找到它们。

要解决此问题，您可以使用resources部分将库的其他资源添加到所需的捆绑文件中（例如vendor-bundle.js）。

Documentation / A Library with Additional Resources

请注意，我们添加了一个资源数组。在这里，我们可以提供捆绑包中包含的其他文件的列表。这些文件与上面指定的路径相关，必须包含文件扩展名。您也可以使用glob模式代替确切的文件名。

基于以上内容，KendoGrid包含的示例aurelia.json / bundle配置：

{
    "name": "aurelia-kendoui-bridge",
    "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
    "main": "index",
    "resources": [
      "grid/*.*",
      "common/*.*"
    ]
}

我创建了一个MVC5 demo project来展示它。

注意：

aurelia-kendoui-bridge拥有众多资源，加载所有这些资源确实可以减缓au build的速度。您可能希望创建观察者而非常规au build以节省一些时间，类似于au run --watch但没有gulp serve部分。

通常，我有au run命令的简化版本，如下所示：au watch

Answer 2

我得到了Github aurelia-ui-toolkits/aurelia-kendoui-bridge项目的贡献者Jeroen Vinke的大力帮助（以及更多）。

这是他让我改变的。

在\ aurelia_project \ aurelia.json，在“aurelia-kendoui-bridge”之后，补充道：

"resources": [
  "grid/*.*",
  "common/*.*"
]

Marton Sagi在答复中提出的相同建议（谢谢）。

将\ src \ main-grid.js中的第15行更改为：

.plugin('aurelia-kendoui-bridge');

从\ src \ grid \ app.html中的第3行添加：

<require from="aurelia-kendoui-bridge/grid/grid"></require>
<require from="aurelia-kendoui-bridge/grid/col"></require>
<require from="aurelia-kendoui-bridge/common/template"></require>

现在它按预期工作。

将Aurelia KendoUI Bridge与ASP.NET MVC一起使用时，指向node_modules的URL

2 个答案: