带有 KnockoutJS 和 MVC 3.0 的嵌套模板

Question

我是淘汰 JS 的新手，但我很享受我每天学习的每一点。

这是我的问题。根据Loading and saving data 教程，假设我的 MVC 3.0 视图模型中有以下类：

public class MasterModel
{
    public int Id { get; set; }
    public string Description { get; set; }
    public ICollection<ParentModel> Parents { get; set; }
}

public class ParentModel
{
    public int Id { get; set; }
    public string Description { get; set; }
    public ICollection<ChildModel> Children { get; set; }
}

public class ChildModel
{
    public int Id { get; set; }
    public string Description { get; set; }
}

我的 HomeController 的 Index() 方法返回一个 MasterModel 实例，其中包含一个 ParentModel 列表，每个实例又包含一个 ChildModel 列表。在客户端，我有以下观点：

@model SomeNamespace.Models.MasterModel

(...)

<script type="text/javascript"> 
    var initialData = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
    var viewModel = {
        parents: ko.observableArray(initialData.Parents),
    (...)
    };

我希望能够使用嵌套模板来显示绑定到 MasterModel 的 ParentModel 列表以及每个 ParentModel 的 ChildrenModel 列表。我还希望两个列表（ParentModel 和 ChildrenModel）都是可观察的数组，以便可以动态添加或删除每个列表的项目。

我试图在 Knockout JS 网站上的 "template" binding 文章之后实现这一点，但我不确定如何实现包含... 可观察数组列表的可观察数组...

有人能指出正确的方向吗？

提前致谢！

Answer 1

这个jsFiddle example应该可以在路上帮助你，它的工作原理是这样的：

<ul data-bind="template: {name: 'TopTemplate' , foreach: masters}"></ul> 
<script type="text/html" id="TopTemplate">
    <li >    
        <p>${name}</p>
        <ul data-bind=" template: {name:  'NestedTemplate' , foreach:  parents } " style="list-style-type:circle;margin-left:15px">
        </ul>
    </li> 

</script>
<script type="text/html" id="NestedTemplate">         
    <li>
        <p>${name}</p>
        <ul data-bind=" template: {name:  'parentTemplate' , foreach:  children } " style="list-style-type:circle;margin-left:15px">
        </ul>
    </li>
</script>
 <script type="text/html" id="parentTemplate">         
    <li>
        <p>${name}</p>
    </li>
</script>

还有这段代码：

var viewModel = {
    masters: ko.observableArray([
        {
        name: "Master1",
        parents: [{
            name: "Parent 1",
             children : [{
                name: "chlid 1"},
            {
                name: "child 2"}]},
        {
            name: "Parent 2",
             children : [{
                name: "chlid 1"},
            {
                name: "child 2"}]}]},
    {
        name: "Master2",
         parents: [{
            name: "Parent 3",
             children : [{
                name: "chlid 1"},
            {
                name: "child 2"}]},
        {
            name: "Parent 4",
             children : [{
                name: "chlid 1"},
            {
                name: "child 2"}]}]}     ])
};

// ko magic...
ko.applyBindings(viewModel);