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

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

我开始只是使用

可见

绑定，但后来我意识到这不是正确的方法，因为内容只是

不可见

，但仍在DOM中加载。 我在后台复制内容并生成无效的HTML（例如，在两个表中复制

id

属性），这在jQuery端产生了问题

然后我看了一看as，它解决了我以前的问题，它可以工作，但是在

标记中使用HTML听起来并不是最干净的解决方案

我不太确定这种用法是否能为这种情况提供任何解决方案，我找不到

---

有关如何处理此问题的任何建议？

标记内的模板将替换为。你可以看一个例子

更新：并不是所有的淘汰组件文档都已更新，但它是

---

另一个选择是。

使用

淘汰组件+AMD

绝对是您想要的。看看史蒂夫·桑德森（Steve Sanderson）的作品，他是

淘汰赛

的作者。它解释了如何使用

ko

和

requirejs

构建SPA。这会消除你的疑虑

例如：

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

---

不是所有的组件文档中都有，但它在这里：似乎

标记是。很高兴知道。这只是避免IE的另一个原因：）听起来不是最好的解决方案。IE10和11被广泛使用。@Alvaro IE8也是如此，但我不会为它编写代码。有时你必须处理不需要的事情，但有时你不能。所以我想，模拟一个动态模板并加载其中一个的方法是使用两个组件，将数据设置为

null

或实际的

data

，具体取决于我想显示的内容？@Alvaro:我已经编辑了我的答案，今晚我将尝试发布一个更完整的示例，非常感谢@Daniel，我相信我通过使用您所说的组件获得了与中相同的结果。如果有什么地方我做错了或者可以改进，请告诉我。@Alvaro:您的小提琴很好，但请注意，您仍然没有异步加载组件。但是，使用组件仍然比使用模板绑定更干净。关于异步加载，您的意思是什么？我没有使用文件作为模板的事实？

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)
    }
}