用于项目规划的淘汰分支模型/视图答案

【问题标题】：knockout branched model / views for project planning用于项目规划的淘汰分支模型/视图
【发布时间】：2015-12-21 00:46:12
【问题描述】：

我正在尝试为“项目规划应用程序”创建嵌套（分支）剔除模型/视图。数据结构应该如下：

-- 项目 (projectid,projectname) |--- 子项目 (subid,subname)

目前，我的淘汰模型/视图模型如下所示：

    //----------------------------
    // model "project"
    //----------------------------
    var project = function ( projectid,
                             projectname )
    {
        var self = this;

        this.projectid = ko.observable(projectid);
        this.projectname = ko.observable(projectname);

    }


    //------------------------------
    // model subproject
    //------------------------------
    var subproject = function (  subid,
                                 subname )
    {
        var self = this;

        this.subid = ko.observable(subid);
        this.subname = ko.observable(subname);

    }



    //----------------------------
    // viewmodel project
    //----------------------------
    var viewmodel_project = function () 
    {
        //--------------------------
        // projects data/view 
        //--------------------------
        this.projects = ko.observableArray([]);
        var projectnumber = 0;

        // Add new project (open modal) 
        this.addproject = function () 
        {
            projectnumber++;
            self.projects.push(new project(projectnumber,"New Project XY"));
        };


        //--------------------------
        // subprojects data/view 
        //--------------------------
        this.subprojects = ko.observableArray([]);
        this.selectedsubproject = ko.observable();
        var subcounter = 0;

        this.addsubproject = function (project) 
        {
            subcounter++;
            self.subprojects.push(new subproject( 
                                project.projectid(),
                                project.projectname() + subcounter));
        };

    }

在 HTML 中，我想在 tbody 表中显示嵌套模型，我的意思是在“项目”和“子项目”的嵌套循环中：

<table>
      <tr>
         <th>Mainprojects and subprojects</th>
         <th></th>
         <th href="#" data-bind="click: addproject">Add Project</th>
      </tr>
     <tbody >
        <!-- ko foreach: projects -->
        <tr>
            <td data-bind="text: projectid"></td>
            <td data-bind="text: projectname"></td>
            <td class="add" href="#" data-bind="click: addsubproject">Add Subproject</td>
        </tr>
                <!-- ko foreach: subprojects -->
                <tr>
                    <td></td>
                    <td data-bind="text: subid"></td>
                    <td data-bind="text: subname"></td>
                </tr>
                <!-- /ko -->    
        <!-- /ko -->
    </tbody>
</table>

我所能做的就是，我可以添加项目，我可以添加子项目，但我不会让它们嵌套或分支。我不知道如何创建这样的模型：

项目 (projectid, 项目名称， "子项目数组")

示例（只是数据结构的样子，没有编码）：

项目：

项目 100 (

Project ID = 100,
Project Name = "Project 100"

subprojects ( [ Subproject ID   = 100.10,
                Subproject Name = "Sub Name 10" ],
              [ Subproject ID   = 100.11,
                Subproject Name = "Sub Name 11" ] )
          ) ,

项目 200 (

Project ID = 200,
Project Name = "Project 200"

subprojects ( [ Subproject ID   = 200.10,
                Subproject Name = "Sub Name 10" ],
              [ Subproject ID   = 200.11,
                Subproject Name = "Sub Name 11" ] )
          )

知道如何构建淘汰模型/视图模型非常感谢 :-) 圣诞快乐

史蒂夫

【问题讨论】：

标签： knockout.js model nested

【解决方案1】：

看起来您有两个独立的列表：项目和子项目。您有子项目引用他们所属的项目，但项目不知道他们的子项目。

项目模型应该包含一个子项目数组作为成员，而不是让子项目引用它们的父项目。这将为您提供您试图在嵌套的 foreach 绑定中利用的嵌套结构。

var project = function ( projectid,
                         projectname )
{
    var self = this;

    this.projectid = ko.observable(projectid);
    this.projectname = ko.observable(projectname);
    this.subprojects = ko.observableArray();
}

this.addsubproject = function (project) 
 {
     subcounter++;
     project.subprojects.push(new subproject(/* subId and name? */));
 };

【讨论】：