将嵌套的 Knockout.js 组件与 RequireJs 结合使用

Using nested Knockout.js components with RequireJs

本文关键字：RequireJs 结合 组件 嵌套 Knockout js      更新时间：2023-09-26

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

打字稿代码

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" }
});

网页视图

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

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

网页视图

<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 管理此嵌套组件？有没有办法将导入责任转移到子组件？

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

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()，其余所有内容都是继承的。

相关文章：