淘汰嵌套模型属性

Question

I need a feature like a repeating table in my web form and need to store my data in a JSON format like this:

[
  {
    "id": 1, "name": "T01", "title": "T01 form title", "totalPoints": "total of all points for sections below",
    "sections":
        [
            { "section": "First section", "point": 4 },
            { "section": "Second section", "point": 5 }
        ]
  },
  {
    "id": 2, "name": "T02", "title": "T02 form title", "totalPoints": "total of all points for sections below",
    "sections":
        [
            { "section": "First section", "point": 4 },
            { "section": "Second section", "point": 5 }
        ]
  }

]

I'm using knockout and I implemented top level of the structure below, but struggling with a nested sections.

Here is my attempts to structure my Model, please advise what option to use, or if this incorrect, please advise the right option:

function Form(data)
    {
        this.Id = ko.observable(data.Id);
        this.Name = ko.observable(data.Name);
        this.Title = ko.observable(data.Title);
        this.Total = ko.observable(data.Total);

    // Option 1, like an array
    this.Sections = ko.observableArray([
        {
             Section: data.Section,
             Point: data.Total
        }
    ]);

    // Option 2, like a function
    function Sections(data) {
        this.Section = ko.observable(data.Section),
        this.Point = ko.observable(data.Point)
    }
}

Later I push this data as a model to observable array like this, again I can push the top level, but couldn't nested properties:

    self.addForm = function () {
        self.forms.push(
            new Form({
                    Id: this.id(),
                    Name: this.name(),
                    Title: this.title(),
                    Total: function() // TODO
                    // Sections nested properties implementation
                })
            );
        self.name("");
    };

Answer 1

I'd say it's best to define two viewmodels:

1. Form , and
2. Section

Your Form will have three kinds of properties:

1. Regular ko.observable values, for Id , Name and Title

   Note: If some of those are static, it's best to not make them observable. I can imagine the Id will never change: you can signal this to other readers of your code by making it a regular string.

2. An observableArray for your list of Section s

3. A pureComputed for Total that sums up all your Section points

 function Section(points, title) { // TODO: check if you need these to be observable this.points = points; this.title = title; }; // Create a new Section from a plain object Section.fromData = function(data) { return new Section(data.point, data.section); }; function Form(id, name, title, sections) { this.id = ko.observable(id); this.name = ko.observable(name); this.title = ko.observable(title); // Map using our static constructor helper this.sections = ko.observableArray( sections.map(Section.fromData) ); this.total = ko.pureComputed(function() { return this.sections().reduce(function(sum, section) { return sum + section.points; }, 0); }, this); } // A helper to get from your data object to a new VM Form.fromData = function(data) { return new Form(data.id, data.name, data.title, data.sections); } // Apply bindings ko.applyBindings({ forms: getTestData().map(Form.fromData) }); // Your test data function getTestData() { return [{ "id": 1, "name": "T01", "title": "T01 form title", "totalPoints": "total of all points for sections below", "sections": [{ "section": "First section", "point": 4 }, { "section": "Second section", "point": 5 } ] }, { "id": 2, "name": "T02", "title": "T02 form title", "totalPoints": "total of all points for sections below", "sections": [{ "section": "First section", "point": 4 }, { "section": "Second section", "point": 5 } ] } ] }; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <ul data-bind="foreach: forms"> <li> <p data-bind="text: title"></p> <ul data-bind="foreach: sections"> <li> <span data-bind="text: title"></span> ( <span data-bind="text: points"></span>) </li> </ul> <span data-bind="text: 'total: (' + total()"></span>) </li> </ul> 

The Section class is a bit plain; if you don't have additional requirements you could choose to use plain objects instead.