在 knockout.js 中动态加载视图/模板答案

【问题标题】：Dynamically load views / templates in knockout.js在 knockout.js 中动态加载视图/模板
【发布时间】：2015-11-03 23:06:52
【问题描述】：

我有一张桌子，我想以两种不同的方式展示它。不同的列数及其内容和单元格的位置。我想为用户提供一种只需单击一个按钮即可从一个视图更改为另一个视图的方法。

我开始只使用visible 绑定，但后来我意识到这不是正确的做法，因为内容只是invisible，但它仍在DOM 中加载。我在后台复制内容并生成无效的 HTML（例如，两个表中的 id 属性重复），这在 jQuery 方面产生了问题。

然后我将the use of knockout templates to accomplish it 视为in this example，它解决了我以前的问题并且它有效，但是在<script> 标签中使用 HTML 听起来不是最干净的解决方案对我来说。

我不太确定使用 of components 是否可以为这种情况提供任何解决方案，我找不到。

关于如何处理这个问题有什么建议吗？

【问题讨论】：

标签： knockout.js knockout-3.0 knockout-3.2

【解决方案1】：

使用knockout components + AMD 绝对是您想要的。看看knockout 的作者 Steve Sanderson 的this。它解释了如何使用 ko 和 requirejs 来构建 SPA。它应该可以消除您的疑虑

例子：

...
<div data-bind="component: myDynamicComponent"> </div>
...

然后，如果您将 component loader 配置为获取其模板 & |或 viewModel 异步您可以将 myDynamicComponent 作为可观察对象：

function RootViewModel(){
    var self = this;
    this.myDynamicComponent = ko.observable('some-component');

    this.someButtonClicked = function() { 
        self.myDynamicComponent('some-other-component'); // this should render your other component async (only if you configured your component loader to do so)
    }
}

【讨论】：

所以我想模拟动态模板并加载一个或另一个的方法是使用两个组件并将数据设置为null 或实际的data，具体取决于我想展示吗？
@Alvaro：我已经编辑了我的答案，今晚我会尝试发布一个更完整的例子
非常感谢@Daniel，我相信通过使用您所说的组件，我设法在this new fiddle 中获得了与this template example 相同的结果。如果我做错了什么或者可以改进，请告诉我。
@Alvaro：你的小提琴很好，但请注意你仍然没有异步加载你的组件。但是，使用组件仍然比使用模板绑定更干净
异步加载是什么意思？我没有为他们的模板使用文件这一事实？

【解决方案2】：

script 标签内的模板被template tags 取代。您可以查看this recent answer I wrote 的示例。

更新：并非所有 Knockout 组件文档都已更新，但它是 here。

另一个选项是dynamically loading templates via AMD (require.js)。

【讨论】：

它不在所有组件文档中，但在这里：knockoutjs.com/documentation/…
看来<template> 标签是not supported in any IE version。
很高兴知道。避免使用 IE 的另一个原因。 :)
这听起来不是最好的解决方案。 IE 10 和 11 被广泛使用。
@Alvaro IE8 也是如此，但我不会为它编写代码。有时你必须处理不受欢迎的事情，但有时你不需要。