淘汰賽嵌套模特屬性

Question

我需要一個像重複表格功能在我的web表單並需要存儲在JSON格式像這樣我的數據：

[ 
    { 
    "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 } 
     ] 
    } 

]

我使用基因敲除和我實現了下面的結構的頂層，但是與嵌套的部分掙扎。

這是我嘗試構建我的模型，請告知使用什麼選項，或者如果這不正確，請告知正確的選擇：

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

後來我把這個數據作爲模型來觀察的陣列狀這一點，我又可以推頂級水平，但不能嵌套的特性：

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

我會說這是最好的定義兩個的ViewModels：

1. Form，並且
2. Section

你Form將會有三種屬性：

1. 定期ko.observable值，Id，Name和Title

   注：如果某些那些是靜態的，最好不要讓它們可觀察。我可以想象Id永遠不會改變：你可以通過使它成爲一個常規字符串來向你的代碼的其他讀者發信號。

2. 的observableArray您的Section小號

3. 一個pureComputed列表Total凝聚了所有Section點

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>

的Section類是有點平淡;如果您沒有其他要求，則可以選擇使用普通對象。