使用 Typescript、Knockout 和 Require 的 HTML 组件 - 未呈现 HTML？答案

【问题标题】：HTML components using Typescript, Knockout and Require - HTML is not rendered?使用 Typescript、Knockout 和 Require 的 HTML 组件 - 未呈现 HTML？
【发布时间】：2020-12-05 19:46:51
【问题描述】：

我正在尝试了解组件驱动的开发是如何工作的，并且我已经关注https://knockoutjs.com/documentation/component-custom-elements.html 此处的文档（包括与此主题相关的许多嵌套链接）但是，尽管 TS/JS 文件加载无误，但 HTML 组件永远不会渲染。

在这里您可以看到 RequireJS 正确加载了 typescript：

这是网页中的 HTML 组件：

HTML component

这是 HTML“模板”中的内容：

<div class="panel">
    <label>Username:</label>
    <input type="text" data-bind="Value: $component.Username()" />
    <br />
    <label>Password:</label>
    <input type="text" data-bind="Value: $component.Password()" />
    <br />
    <label>Valid:</label>
    <input type="text" data-bind="Value: $component.ValidUser()" />
</div>

这里是HTML模板的注册：

const componentName = "Login-User";
ko.components.unregister(componentName);
ko.components.register(componentName, {
    viewModel: LoginViewModel,
    template: { require: `text!/Views/Components/${componentName}.html` }
});

我在控制台中没有收到任何错误，但在将断点添加到调试时从未命中 TS 文件中的构造函数，这表明我根本没有尝试实际呈现 HTML 组件？

我已检查所有文件路径是否正确并删除并重新编译 TS 文件以生成 JS 文件以确保一切都是最新的，我假设我没有以某种方式正确配置 require，因此 HTML 组件永远不会实际注册但是由于没有记录错误，我对下一步去哪里有点卡住了！正如我之前所说，我已经阅读了关于 Knockout 和 RequireJS 的文档，但是在实现 HTML 组件时搜索谷歌的问题时，我似乎只能得到 Angular 的结果。

任何关于如何确定问题的建议将不胜感激，如果有任何关于如何一起使用 Knockout/Require/Typescript/HTML 组件的文档/指南，有人可以指出我会很棒！

我想我已经提供了所需的一切，但如果没有，请告诉我。

谢谢，丹尼

【问题讨论】：

标签： html typescript knockout.js components requirejs

【解决方案1】：

好的，经过几个小时的反复试验，我发现我遇到了一些问题，对于遇到此问题的其他人，请尝试以下解决方案：

我没有调用 ko.applybindings();

import * as ko from "knockout";

export default class LoginViewModel {
    Username: KnockoutObservable<string>;
    Password: KnockoutObservable<string>;
    ValidUser: KnockoutComputed<boolean>;

    constructor(username: string, password: string) {
        this.Username = ko.observable(username);
        this.Password = ko.observable(password);

        this.computedMethods();
    }

    private computedMethods(): void {
        this.ValidUser = ko.pureComputed(() => {
            return this.Username() === "Danny" && this.Password() === "pasword";
        });
    }
}

const componentName = "login-user";
ko.components.register(componentName, {
    viewModel: LoginViewModel,
    template: { require: `text!Scripts/Typescript/${componentName}.html` }
});

ko.applyBindings(); << This is important as it actually binds the custom element i.e login-user params="username: 'Danny', password: 'none'"></login-user> and without it nothing will be rendered on the page

纠正此问题后，我在尝试加载自定义元素时在控制台中收到 404，尽管文件路径正确，但我发现解决此问题的最佳方法是将自定义元素与 TS 计数器放在同一文件夹中-部分：

Before:
template: { require: `text!/Views/Components/${componentName}.html` }

After:
template: { require: `text!Scripts/Typescript/${componentName}.html` }

Google 搜索建议安装以下 nuget 包，尽管我认为实际上只需要 require.text，如果它不能解决您的问题，值得一试..： Require Packages

我最初使用驼峰式命名我的组件，即 Login-User.ts 和 Login-User.html，我在某处读到它们应该是小写才能是有效的 html“标签”以及 .ts 和 .html 文件名称应该完全相同

希望这可以帮助其他遇到问题的人。

【讨论】：