Javascript Knockout.js的HTML视图（UserControl）

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

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

---

提前谢谢。

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

在伪代码中，您会得到如下结果：

<!-- 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>

$（文档）.ready（函数（）{
var viewModel=newyourviewmodel（）；
applyBindings（viewModel，document.getElementById（'bindModelHere'）；
});
//你的javascript
函数yourViewModel（）{
this.loadedTemplate=ko.observable（）；
//使用get和append从服务器加载模板到文档体
//加载并附加do:loadedTemplate（“idForTemplate”）；
}

---

这样，您就可以使用ajax加载视图/模板，只需加载所需的视图。

谢谢您的回答。如何链接主页中包含“idForTemplate”的html文件？这样你就可以上路了。