Динамически добавляйте элементы во вложенный список, используя Knockout.js Issue

Question

Я использую Knockout-3.2.0.js в приложении mvc4. У меня есть список класса FieldInfo, который содержит список себя. FieldInfo содержит идентификатор поля, имя поля, имя файла и список. После некоторых манипуляций мое действие возвращает список в представление. Я настроил все на мой взгляд:

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

Наблюдаемый массив изначально является списком, который имеет сам список. Все работает нормально, пока пользователь не нажмет кнопку Добавить. Моя кнопка добавления в viewModel имеет следующее:

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

LineItemFields является основным списком, который имеет 7 дочерних элементов (в качестве примера), и эти 7 дочерних элементов имеют список каждый, требование заключается в добавлении нового элемента в списки этих 7 дочерних элементов каждый. Я попытался отладить, и все прошло хорошо, но он все еще не добавляет новую строку. Следующее находится в привязке шаблона:

<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: Должны ли внутренние списки быть наблюдаемыми как их родитель?
Q2: Если нет, что не так с функцией addLineItem?

Answer 1

Поскольку нет ответа до даты, и я получил это работает, поэтому я подумал опубликовать ответ, чтобы принести пользу другим. Я сделал следующие изменения в моей 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});
    })
 }