動態地將數據/視圖/模板加載到

Question

我有一張桌子，我想用兩種不同的方式顯示它。 不同數量的列及其內容和單元格的位置。 我想為用戶提供一種方法，只需單擊一個按鈕即可從一個視圖切換到另一個視圖。

我只是通過使用visible綁定開始做的，但是后來我意識到這不是正確的方法，因為內容只是invisible但仍在DOM中加載。 我在后台復制內容並生成無效的HTML（例如，兩個表中都有重復的id屬性），這在jQuery方面產生了問題。

然后，如本例中所示 ，我研究了使用敲除模板來完成 此任務 ，它解決了我以前的問題，並且可以工作， 但是在<script>標記內使用HTML聽起來不是我的最干凈的解決方案。

我不太確定組件的使用是否可以為這種情況提供任何解決方案，我找不到一個解決方案。

關於如何處理此問題的任何建議？

Answer 1

尋找knockout components + AMD絕對是您想要的。 看看這個由史蒂夫·桑德森，筆者knockout 。 它說明了如何使用帶有requirejs ko構建SPA。 它應該清除您的懷疑

例：

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

Answer 2

script標簽內的模板被模板標簽取代。 您可能會看一下我為示例編寫的最新答案 。

更新：並非所有的Knockout組件文檔都已更新，但是在此處 。

另一個選擇是通過AMD（require.js）動態加載模板 。