使用Knockout.js将元素动态添加到嵌套列表中

Question

I'm using Knockout-3.2.0.js in mvc4 application. I have a list of FieldInfo class, which contains a list of itself. FieldInfo contains field_id, field_name, file_name and list. After doing some manipulation, my action returns a list to the view. I setup everything in my view:

 @{
      var initialData = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
 }
 LineItemFields = ko.observableArray(@initialData);

Observable array is initially a list which has a list itself. Everything works fine until the user clicks the Add button. My add button in viewModel has the following:

 addLineItem = function () {
                ko.utils.arrayForEach(ko.toJS(LineItemFields), function (item) {
                    item.LineItemValues.push({ "FieldValue": "0", "FieldID": 1})
                })
            }

LineItemFields is the main list which has 7 child (as an example) and those 7 child have a list each, requirement is to add a new element to the lists of those 7 children each. I tried debugging and everything went well but it still doesn't add the new row. Following is in template binding:

<script id="LineItemDataTemplate" type="text/html">
        <td data-bind="foreach: $data['LineItemValues']"><input type="text" data-bind="value: FieldValue, enable: $parent.isUpdatable" class="table-column" /></td>
</script>

<table>
    <tr data-bind="template: {name: 'LineItemDataTemplate', foreach: LineItemFields}"> </tr>
</table>

Q1: Does the inner lists have to be observable as their parent is?
Q2: If not, What is wrong with the addLineItem function?

Answer 1

As there is no answer up to date and i got it working so i thought to post an answer to benefit others. I made the following changes to my viewModel.

 //added the observableArray to each item in the parent list
 ko.utils.arrayForEach(LineItemFields(), function (item) {
                item.LineItemValues = ko.observableArray(item.LineItemValues);
            })

 //Removed ko.toJS(..) from LineItemFields and applied ()
 addLineItem = function () {
        ko.utils.arrayForEach(LineItemFields(), function (item) {
        item.LineItemValues.push({ "FieldValue": "0", "FieldID": 1});
    })
 }