將嵌套的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() ，其余的都是繼承的。