Question

我正在尝试将一个新行推送到一个可观察的数组，而没有任何值来显示两个下拉列表和一些文本框。这是一个时间表。我不太确定如何在小提琴中复制这个。

当我注释掉推送部分时，控制台日志会显示原始值，这是我不想要的。需要添加一个没有任何值的新行，某些地方我缺少某些东西或做错了什么。

视图模型的一部分

    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>

我收到错误

未捕获的ReferenceError：无法处理绑定＆＃34;选项：功能（）{return $ root.ProjectList}＆＃34;消息：ProjectID未定义

EDIT1

在添加一行之后，即使我在控制台中收到错误，我也会尝试查看observable中添加的内容。我将第二行视为一个函数，其中第一行只是一个对象。 objvmTimesheets.TimeSheetRows（）

输出显示如下。对象具有映射的项，其中函数c（）为空。所以我假设要映射的项目。

[Object, c()]

修改2

这是小提琴，我得到同样的错误

Fiddle with the same error

工作代码

Working Fiddle

我终于开始工作了。以下是我的工作代码。我还将更新小提琴，以便稍后参考/

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

在没有值的情况下向Knockout ObservableArray添加新行

0 个答案: