ASP.NET MVC5 敲除 JS 映射"未捕获的类型错误： 无法读取未定义的属性'fromJS'"错误

Question

寻求有关KnockoutJS和我正在开发的MVC应用程序的帮助。

我正在尝试使用 Knockoutjs 将服务器端视图模型映射到客户端视图模型，然后通过视图将每个客户端视图模型添加到集合中，并(不在下面的代码中(使用 AJAX 返回到控制器。

到目前为止，当我尝试将视图模型添加到挖空数组时，我收到以下错误：

TrainingCourse.js:47 Uncaught TypeError: Cannot read property 'fromJS' of undefined

我的淘汰脚本如下：

TrainingCourseViewModel = function(data) {
var self = this;
jsonData = data;
self.rows = ko.observableArray([
new TrainingCourseItemViewModel({
"TrainLevel": 1, "TrainCourseTitle": null, "TrainProviderName": null, "TrainDateStarted": null,
"TrainDateCompleted": null, "TrainHoursAttended": 0, "TrainCost": 0, "QualificationGained": false,
"VoluntDateStarted": null, "VoluntDateEnded": null, "VoluntWhoWith": null, "VoluntHoursAttended": 0, "VoluntContactDetails": null,
"WorkExpDateStarted": null, "WorkExpDateEnded": null, "WorkExpWhoWith": null, "WorkExpHoursAttended": 0, "WorkExpContactDetailsEmployer": null,
"DateofPurchase": null, "Cost": 0, "PurchaseDetails": null, "PersonId": 0
})
]);
self.addRow = function () {
self.rows.push(new TrainingCourseItemViewModel({
"TrainLevel": 0, "TrainCourseTitle": null, "TrainProviderName": null, "TrainDateStarted": null,
"TrainDateCompleted": null, "TrainHoursAttended": 0, "TrainCost": 0, "QualificationGained": false,
"VoluntDateStarted": null, "VoluntDateEnded": null, "VoluntWhoWith": null, "VoluntHoursAttended": 0, "VoluntContactDetails": null,
"WorkExpDateStarted": null, "WorkExpDateEnded": null, "WorkExpWhoWith": null, "WorkExpHoursAttended": 0, "WorkExpContactDetailsEmployer": null,
"DateofPurchase": null, "Cost": 0, "PurchaseDetails": null, "PersonId": 0}));
}
self.removeRow = function (row) {
self.rows.remove(row);
calculateTrainingCost();
calculateOverallTotal();
trainingDateAutoCompleted();
}
function TrainingCourseItemViewModel() {
var self = this;
ko.mapping.fromJS(data, {}, self);
}
}

错误发生在该文件的第 47 行，如下所示：

function TrainingCourseItemViewModel() {
var self = this;
ko.mapping.fromJS(data, {}, self);
}

关联的视图如下：

@* Serialize model in to JSON *@
@{ string data = new JavaScriptSerializer().Serialize(Model);}

<h3>Add Training/Qualification</h3>
<div id="TrainingCourseViewModel">
<table class="table table-hover">
<thead>
<tr>
<th>CQFW Level</th>
<th>Course Title</th>
<th>Provider Name</th>
<th>Date Started</th>
<th>Date Completed</th>
<th>Hours Attended</th>
<th>Cost</th>
<th>Qualification Gained?</th>
</tr>
</thead>
<tbody data-bind="foreach: rows" id="trainingPadding">
<tr>
<td class="col-md-1">@Html.EnumDropDownListFor(modelItem => Model.TrainLevel, new { @class = "form-control site-level-ddl trainingLevel", data_bind = "value: TrainLevel" })</td>
<td class="col-md-2"><input type="text" data-bind="value: TrainCourseTitle" class="form-control" /></td>
<td class="col-md-2"><input type="text" data-bind="value: TrainProviderName" class="form-control" /></td>
<td class="col-md-1"><input type="text" data-bind="value: TrainDateStarted" class="form-control date-input datepicker" placeholder="dd/mm/yyyy" /></td>
<td class="col-md-1"><input type="text" data-bind="value: TrainDateCompleted" class="form-control date-input datepicker trainingDateCompleted hasDatepicker" onchange="trainingDateAutoCompleted()" placeholder="dd/mm/yyyy" /></td>
<td class="col-md-1"><input type="text" data-bind="value: TrainHoursAttended" class="form-control" onkeyup="calculateTrainingCost()" /></td>
<td class="col-md-1"><input type="text" data-bind="value: TrainCost" class="form-control trainingCost" placeholder="£0.00" onkeyup="calculateTrainingCost(), calculateOverallTotal()" /></td>
<td class="col-md-1" style="text-align: center"><input type="checkbox" data-bind="value: QualificationGained" class="" /></td>
<td class="col-md-1" style="width: 4%; text-align: center"><a href="#" data-bind="click: $root.removeRow" class="glyphicon glyphicon-trash text-danger" /></td>
</tr>
</tbody>

</table>
<input type="button" value="Add" data-bind="click: addRow" class="btn btn-default" />
</div>
<!---Scripts-->
<script type="text/javascript" src="~/Scripts/knockout-3.4.2.js"></script>
<script type="text/javascript" src="~/Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript" src="~/Scripts/KnockoutViewModels/TrainingCourse.js"></script>
<script type="text/javascript">
var trainingCourseViewModel = new TrainingCourseViewModel(@Html.Raw(data));
ko.applyBindings(trainingCourseViewModel);
</script>

任何帮助或建议将不胜感激，因为我是 KnockoutJS 的新手......

干杯

Answer 1

确保在创建视图模型实例和启动绑定时已完全加载 dom us。

如果是纯 java 脚本， 用

window.addEventListener('DOMContentLoaded', function(){
var trainingCourseViewModel = new TrainingCourseViewModel(@Html.Raw(data));
ko.applyBindings(trainingCourseViewModel);
});

或者，如果您使用的是jQuery框架，

$(function(){
var trainingCourseViewModel = new TrainingCourseViewModel(@Html.Raw(data));
ko.applyBindings(trainingCourseViewModel);
});