Knockout.js 将新行添加到不带值的敲除ObservalArray

我试图将新行推送到一个可观察的数组中，而不显示任何值，以显示两个下拉列表和几个文本框。这是一张时间表。我不太确定我怎样才能在小提琴中复制这一点

当我注释出push部分时，控制台日志显示原始值，这是我不想要的。需要添加一个没有任何值的新行，在某个地方我遗漏了什么或做了什么错误

视图模型的一部分

    vmTimesheets = function () {
       var self = this;
       self.TimesheetList = ko.observableArray([]);
       self.TimeSheetRows = ko.observableArray([]);
       self.TimeSheetHeader = ko.observableArray([]);
       self.ProjectList = ko.observableArray([]); // this is filled through an ajax call
       self.ActivityList = ko.observableArray([]);   // this is filled through an ajax call

    self.GetTimesheets = function () {
       // get the ajax data from the server    
[{"RowTimeSheetID":1,"TimeSheetID":1,"WeekNo":23,"ProjectID":1,"ActivityID":1,"RowUniqueNo":"1433070236953",
"TimesheetColumns":[{"ColTimeSheetID":1,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"5/31/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":false,"IsEnabled":false},{"ColTimeSheetID":2,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/1/2015 12:00:00 AM","DayHours":8,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":3,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/2/2015 12:00:00 AM","DayHours":8,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":4,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/3/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":6,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/4/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":7,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/5/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":8,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/6/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":false,"IsEnabled":false}]}]"
    }    

//TimeSheetHeader just has the dates of the current week.
    self.AddRow = function () {

        var jsondata = ""
        ko.utils.arrayForEach(objvmTimesheets.TimeSheetHeader(), function (item) {

            jsondata = ko.toJSON(objvmTimesheets.TimeSheetRows, ['RowTimeSheetID', 'TimeSheetID', , 'ProjectID', 'ActivityID',
        'RowUniqueNo', 'TimesheetColumns', 'ColTimeSheetID', 'RowTimeSheetID', 'TMTypeID', 'WorkDay', 'DayHours',
            'DayComments', 'IsWeekday', 'IsEnabled']);
        });
        objvmTimesheets.TimeSheetRows.push(ko.mapping.fromJSON(JSON.parse(jsondata))); // I assume this should show a new row but it 
     }
}

模板

<script type="text/html" id="TimesheetListTmpl">

<tr class="box-body table-responsive no-padding">


    <td >
    <select id="Projects" name="Project" class="form-control" data-bind="options: $root.ProjectList, optionsText: 'ProjectName', optionsValue: 'ProjectID', value: ProjectID, optionsCaption: 'Select',valueAllowUnset: true">
                        </select>
    </td>
     <td >
    <select id="Activity" name="Activity" class="form-control" data-bind="options: $root.ActivityList, optionsText: 'Activity', optionsValue: 'ActivityID', value: ActivityID, optionsCaption: 'Select',valueAllowUnset: true">
                        </select>
    </td>

     <!-- ko foreach : TimesheetColumns -->
    <td>
    <input style="width:60px" type="text" data-bind="value:DayHours,attr:{id: 'DayHours' + ':' + $index() + $parentContext.$index()},enable:IsWeekday "><span style="padding-left:5px"><a href="#" title='Add Comment'" data-bind="attr:{id: 'DayHours' + ':' + $index() + $parentContext.$index()},visible:IsWeekday " >+</a></span>


    </td>
    <!-- /ko -->
</tr>

</script>

---

它抱怨的是您的ProjectList变量有一个没有ProjectID成员的条目。这就是我无法理解的我注释掉了模板中的两个下拉列表现在我得到了这个错误

Uncaught ReferenceError:无法处理绑定“foreach:function（）{return TimesheetColumns}”消息：未定义时间表列

foreach中是否使用了您的模板？什么变量绑定在那里？ko.mapping.fromJSON的结果将是一个可观察的或可观察的数组。你可能应该检查一下你在推之前的每个阶段的状态。至少，您应该推送

ko.mapping.fromJSON

结果的内容。

vmTimesheets = function () {
       var self = this;
       self.TimesheetList = ko.observableArray([]);
       self.TimeSheetRows = ko.observableArray([]);
       self.TimeSheetHeader = ko.observableArray([]);
       self.ProjectList = ko.observableArray([]); // this is filled through an ajax call
       self.ActivityList = ko.observableArray([]);   // this is filled through an ajax call

    self.GetTimesheets = function () {
       // get the ajax data from the server    
[{"RowTimeSheetID":1,"TimeSheetID":1,"WeekNo":23,"ProjectID":1,"ActivityID":1,"RowUniqueNo":"1433070236953",
"TimesheetColumns":[{"ColTimeSheetID":1,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"5/31/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":false,"IsEnabled":false},{"ColTimeSheetID":2,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/1/2015 12:00:00 AM","DayHours":8,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":3,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/2/2015 12:00:00 AM","DayHours":8,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":4,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/3/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":6,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/4/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":7,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/5/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":8,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/6/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":false,"IsEnabled":false}]}]"
    }    

  self.AddTimeSheetRows = function () {
        objvmTimesheets.objvmAddTimeSheetRow.AddRow();
    }

vmAddTimesheetRows = function () {
        var self = this
        self.RowTimeSheetID = ko.observable("");
        self.TimeSheetID = ko.observable("");
        self.RowUniqueNo = ko.observable("");
        self.WeekNo = ko.observable("");

        self.ProjectID = ko.observable("");
        self.ActivityID = ko.observable("");
        self.TimesheetColumns = ko.observableArray([]);

        self.AddRow = function () {
            objvmTimesheets.objvmAddTimeSheetRow.TimesheetColumns.removeAll();
            var kojsondata = "";
            ko.utils.arrayForEach(objvmTimesheets.TimeSheetHeader(), function (item) {
                objvmTimesheets.objvmTimeSheetColumns.WorkDay(item.TSDate);
                objvmTimesheets.objvmTimeSheetColumns.IsWeekday(item.IsWeekday());
                kojsondata = ko.toJSON(objvmTimesheets.objvmTimeSheetColumns, ['ColTimeSheetID', 'RowTimeSheetID', 'WorkDay', 'DayHours', 'DayComments', 'IsWeekday']);

                objvmTimesheets.objvmAddTimeSheetRow.TimesheetColumns.push(JSON.parse(kojsondata));

            });
            objvmTimesheets.objvmAddTimeSheetRow.RowUniqueNo(moment().toDate().getTime())

            var jsondata = ko.toJSON(objvmTimesheets.objvmAddTimeSheetRow, ['RowTimeSheetID', 'TimeSheetID', 'WeekNo', 'ProjectID', 'ActivityID',
        'RowUniqueNo', 'TimesheetColumns', 'ColTimeSheetID', 'RowTimeSheetID', 'WorkDay', 'DayHours', 'DayComments', 'IsWeekday']);
            objvmTimesheets.TimeSheetRows.push(ko.mapping.fromJS(JSON.parse(jsondata)));



        }

    };  // End Timesheet Rows view model
    self.objvmAddTimeSheetRow = new vmAddTimesheetRows();


vmAddTimesheetColumns = function () {

        var self = this;
        self.ColTimeSheetID = ko.observable("");
        self.RowTimeSheetID = ko.observable("");
        self.WorkDay = ko.observable("");
        self.DayHours = ko.observable("");
        self.DayComments = ko.observable("");
        self.IsWeekday = ko.observable(true);


    };  // End Timesheet Rows view model
    self.objvmTimeSheetColumns = new vmAddTimesheetColumns();
}; End of Main View Model