Question

我正在尝试将Knockout推荐的AMD模块模式用于示例项目，但模板（.html）文件未加载。它由Require.js在不同的目录中搜索。我正在努力的模式是：

其中viewModel和模板由js组件部分返回。

这是我的Require.js配置：

require.config({
    baseUrl: "js",
    paths: {
        jquery: "jquery-2.1.4.min",
        ko: "knockout-3.3.0",
        "jquery.vertmenusc": "plugins/jquery.vertmenusc/jquery.vertmenusc"
    },
    shim: {
        "jquery.vertmenusc": ["jquery"]
    }
});

require(['jquery', 'ko', 'jquery.vertmenusc'], function($, ko) {

    ko.components.register('vert-menu', {
        require: "../templates/vert-menu/vert-menu"
    });

    ko.applyBindings();
});

这是组件的js部分（vert-menu.js）。模板只是基本的HTML：

define(['ko', 'text!./vert-menu.html'], function(ko, template) {

    function VertMenuViewModel() {
    }

    return { viewModel: VertMenuViewModel, template: template };
});

我的目录结构如下：

root
  + js
  + plugins
  + jquery.vertmenusc
    - jquery.vertmenusc.css
    - jquery.vertmenusc.js
  - jquery-2.1.4.min.js
  - knockout-3.3.0.js
  - main.js
  - require.min.js
  - text.js
  + template
    +vert-menu
      - vert-menu.html
      - vert-menu.js
  - index.html

我得到的错误：

http://localhost:8080/templates/templates/templates/vert-menu/vert-menu.html 404 (Not Found)

为什么Require.js会查看该目录？

Answer 1

在require.config添加模板路径

...
paths: {
    templates: "../templates",
    ...

然后当您注册组件时使用此

ko.components.register('vert-menu', {
    require: "templates/vert-menu/vert-menu"
});

而不是../templates

无法使Knockout.js推荐的AMD模块模式起作用

1 个答案: