无法使 Knockout.js' 推荐的 AMD 模块模式工作

Question

我正在尝试使 Knockout 推荐的 AMD 模块模式在示例项目中工作，但未加载模板 (.html) 文件。它由 Require.js 在不同的目录中搜索。我要参考的模式是这样的：

其中viewModel和template是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 模块模式工作

Can't make Knockout.js' recommended AMD module pattern to work

requirejs

knockout.js

knockout-3.0