HTML Views (UserControl) for Knockout.js

Question

在单页应用程序中，如何有效地使用Knockout.js来实现MVVM。有没有办法分别创建视图（Html文件）和视图模型（javascript文件）？这可以在另一个HTML主文件中引用。

我尝试过iframe，但它允许用户导航到各个视图。还有别的办法吗？

提前谢谢。

Answer 1

是的，我认为这是可能的。如果将每个视图创建为一个单独的html文件中的模板，然后在实例化视图模型时加载适当的模板并将其附加到文档正文中。

在伪代码中，你会得到这样的东西：

<!-- your page -->
<div id="bindModelHere">
    <!-- ko template: loadedTemplate -->
    <!-- /ko -->
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var viewModel = new yourViewModel();
        ko.applyBindings(viewModel, document.getElementById('bindModelHere'));
    });
</script>

//your javascript
function yourViewModel (){
    this.loadedTemplate = ko.observable();
    //Load template from server with a get and append to document body
    //when loaded and appended do: loadedTemplate("idForTemplate");
}
<!-- the template/view in a separate file-->
<script type="text/html" id="idForTemplate">
    <!-- your html -->
</script>

通过这种方式，您可以使用ajax加载视图/模板，然后只加载所需的视图。