使用 KnockoutJS 和 MVC 3.0 的嵌套模板

Question

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

这是我的问题。根据加载和保存数据教程，假设我的 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" 绑定 文章来实现此操作，但我不确定如何实现实现包含可观察数组列表的可观察数组...

有人可以指出我正确的方向吗？

提前致谢！

Answer 1

这个 jsFiddle 示例 应该能够帮助您，它的工作原理如下：

<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);