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

【问题标题】：Using nested Knockout.js components with RequireJs将嵌套的 Knockout.js 组件与 RequireJs 一起使用
【发布时间】：2016-04-20 20:58:47
【问题描述】：

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

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

【问题讨论】：

我不确定，但应该这样：import ko = require("knockout"); 不是这样：var ko = require("knockout");？
他可能正在使用 TypeScript 或 ES6 - 这就是我的 require 语句的样子

标签： javascript c# knockout.js typescript requirejs

【解决方案1】：

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

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

【讨论】：