将嵌套的Knockout.js组件与RequireJs一起使用

Question

我有一个Knockout.js组件，它使用嵌套的pagination组件，如下所示：

TypeScript代码

import ko = require("knockout");

class NetworkListViewModel {
    arrayValue = ko.observableArray<string>();
    currentPage = ko.observable<number>(0);
    totalItemCount = ko.observable<number>(0);

    constructor(params) {
        this.arrayValue = params.value
        this.currentPage(1);
        this.totalItemCount(params.totalItemCount);
    }
}

ko.components.register("network-list", {
    viewModel: NetworkListViewModel,
    template: { require: "text!components/network-list/network-list.html" }
});

HTML视图

<div class="network-list" >
    <pagination params="CurrentPage: CurrentPage, TotalItemCount: TotalItemCount()"></pagination>
</div>

我试图添加一个脚本以这种方式在RequireJs中注册它：

HTML视图

<div class="network-list" >
    <pagination params="CurrentPage: CurrentPage, TotalItemCount: TotalItemCount()"></pagination>
</div>
<script>
    require(["components/pagination/pagination"]);
</script>

但它不起作用。

在主视图（index.cshtml）中注册那些依赖项即可。

<div id="bindingSection">
    <network-list params="value: data, totalItemCount: totalItemCount()">  </network-list>
</div>

@section Scripts {
<script>
    require(['pages/home',
        "components/network-list/network-list",
        "components/pagination/pagination"
    ]);
</script>
}

这样做意味着开发人员必须知道每个组件的所有子依赖关系（在大型项目中这并不简单）。 如何指示RequireJs管理此嵌套组件？ 有没有办法将进口责任转移到子组件？

Answer 1

网络列表需要分页组件，因此在网络列表的脚本中放置需求的适当位置：

import ko = require("knockout");
import pagination = require("components/pagination/pagination");

class NetworkListViewModel {
   // code..

如果您实际上未在代码中引用导入，则TypeScript编译器会“忽略” require()语句，这是一个问题。 您可以通过添加虚拟行来解决此问题，例如var tmp = pagination; ，或使用其他导入语法，例如

/// <amd-dependency path="components/pagination/pagination" />

import ko = require("knockout");

class NetworkListViewModel {
   // code..

这种方法将强制TypeScript加载模块。

我经常使用这种依赖关系，并且效果很好。 通常，视图模型的页面中只有一个require() ，其余的都是继承的。