使用 javascript 加载 knockoutjs 组件答案

【问题标题】：Load knockoutjs component using javascript使用 javascript 加载 knockoutjs 组件
【发布时间】：2015-09-30 23:23:05
【问题描述】：

用 JavaScript 代码加载 ko 组件而不是在 html 中定义自定义元素的最佳方法是什么？我尝试使用 ko.components.defaultLoader.load 但我的组件构造函数没有命中。我仔细检查了一下，该组件似乎已注册。

【问题讨论】：

<div data-bind="component: { name: 'mycomp', params: { }}></div>? ko.components.register('mycomp', {viewModel: function(params) {...}, template: ''})?如果这不能回答您的问题，您应该提供更多详细信息，例如您到底想要什么（fiddle）以及原因。

标签： javascript knockout.js components

【解决方案1】：

我相信您正在寻找的是函数 ko.components.get(componentName, callback)。该方法的作用是要求组件加载器解析组件名称，直到找到一个。如果找不到，它将调用回调（null）。如果没问题，它会调用 callback(componentDefinition)，其中 componentDefinition 是用于注册组件的对象，如 { viewmodel: ..., template: ...}。

据我所知，没有现成的函数可以返回“工作”组件。得到 componentDefinition 对象后你要做的事情是这样的：

将模板转换为 DOM 元素
实例化视图模型（如果已定义）
将视图模型绑定到 DOM 元素

请注意，这不是直接的，因为模板和视图模型可以通过多种方式定义。我建议查看https://github.com/knockout/knockout/blob/master/src/components/componentBinding.js，看看它是如何在这里完成的（从第 38 行开始）。

我希望这对您有用，否则您可以考虑其他选项，例如在代码中使用组件绑定动态创建 div 元素，其中组件名称和参数绑定到视图模型的属性。然后将此视图模型绑定到您刚刚创建的 div 元素。这应该“仅代码”工作，其代码比其他路线少得多。

【讨论】：