使用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列表,每个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站点上的"模板"绑定文章之后实现这个,但我不确定如何实现包含...可观察数组列表的observable数组...

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

提前致谢!

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