2

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

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

然后我看了一下使用敲除模板来完成它,就像在这个例子中一样,它解决了我以前的问题并且它有效,但是在标签内使用 HTML<script>对我来说听起来不是最干净的解决方案。

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

关于如何处理这个问题的任何建议?

4

2 回答 2

4

使用knockout components + AMD绝对是您正在寻找的。看看. _ _ 它解释了如何使用withknockout来构建 SPA 。它应该消除你的疑虑korequirejs

例子:

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

然后,如果您将组件加载器配置为获取其模板 & | 或 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)
    }
}
于 2015-08-11T21:13:31.567 回答
1

标签内的模板被模板标签script取代。你可以看看我最近写的这个答案作为一个例子。

更新:并非所有 Knockout 组件文档都已更新,但在此处

另一种选择是通过 AMD (require.js) 动态加载模板

于 2015-08-11T16:05:43.383 回答