可以通过动态生成的 <script> 注册 Knockout 组件吗？

Posted 2023-03-27

【中文标题】可以通过动态生成的 <script> 注册 Knockout 组件吗？

【英文标题】：Can Knockout components be registered by a dynamically generated <script>?

【发布时间】：2019-02-20 10:41:47

【问题描述】：

动机是我不想在浏览器首次访问网站时注册我的所有组件。我希望能够在代码需要时注册组件，并且我不希望在第一次加载网页时加载组件的 JS 文件。通过Ajax，我想加载包含组件注册码的JS文件。

请问，这在 Knockout 中可行吗？

【问题讨论】：

这似乎可以通过 RequireJS..

我不想事先进行 RequireJS 配置。我不想知道关于组件的任何线索，直到 调用一个 URL，然后 JS 函数使用该 URL 为相关组件加载视图模型和模板，其名称应由调用者 指示（例如在数据属性或其他东西）。为了防止页面重新加载，将有另一个 JS 代码使用 History API 劫持 URL 调用。

有一种方法可以创建自定义组件加载器，该加载器可以从 URL、视图模型数据和组件的模板标记加载。所以，问题是我是否可以在代码中的某个时间甚至很久之后调用 ko.components.register（使用已提供组件名称以及视图模型的 URL 和组件所需模板的 JS 代码）页面已经加载完毕，可以通过自定义加载器动态注册其视图模型和模板加载的组件。

又该如何调用 ko.applyBindings 呢？带参数还是不带参数？或者新加载的组件会简单地开始工作吗？

最简单的方法是在页面加载时为我所有的数千个组件运行注册代码，然后在需要时使用它们。所以，问题仍然是我怎样才能避免必须注册一千个组件但稍后再注册它们。

【参考方案1】：

如果您想以不同于 Knockout 的默认加载器（使用 ko.components.register）提供的方式加载组件，您应该创建一个自定义加载器（docs）。在您的情况下，您似乎只想实现 getConfig 方法来返回组件的配置。

【讨论】：

谢谢。我访问了自定义加载程序的文档。我正在使用代码示例加载属于同一类别的自定义组件（例如，提供网页主要内容的部分视图），这是我在问题中难以表达的原始问题。我只能使用一个自定义组件名称来加载并交换它们。我不知道你后来回复了。谢谢你这么快。我会将您的答案标记为答案，这是构建的基础。我已经成功地开始扩展我的代码来做路由等。我稍后会分享我的进展。

我已经处理过路由。我不能更早地发布它，以便我可以花一些时间来验证所有代码是否按预期工作。我已经完成了，现在已经在 coderreview 上发布了a question。它是一个完整的 ASP.NET MVC 5 项目，使用 Knockout 和 html5 History API 进行客户端路由，并且可以轻松地与任何服务器端 Web 开发框架一起使用。感谢您期待您的帮助。