[英]ASP.NET MVC5 KnockoutJS mapping “Uncaught TypeError: Cannot read property 'fromJS' of undefined” error
Looking for some help with KnockoutJS and an MVC application I am working on. 寻找有关KnockoutJS和我正在开发的MVC应用程序的帮助。
I am attempting to use Knockoutjs to map a server side View Model to a Client side View Model then via the view add each client view model to a collection and (not in the below code) return back to the controller using AJAX. 我正在尝试使用Knockoutjs将服务器端视图模型映射到客户端端视图模型,然后通过该视图将每个客户端视图模型添加到集合中(并且不在下面的代码中)使用AJAX返回到控制器。
Up to now when I attempt to add a View Model to the knockout array I receive the following error : 到现在为止,当我尝试将视图模型添加到敲除数组时,我收到以下错误:
TrainingCourse.js:47 Uncaught TypeError: Cannot read property 'fromJS' of undefined
My knockout script is as follows : 我的淘汰赛脚本如下:
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);
}
}
The error is occurring at line 47 of that file which is the following : 该文件的第47行出现以下错误:
function TrainingCourseItemViewModel() {
var self = this;
ko.mapping.fromJS(data, {}, self);
}
The associated view is as follows : 相关视图如下:
@* 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>
Any help or suggestion would be greatly appreciated as I am pretty new to KnockoutJS... 任何帮助或建议都将不胜感激,因为我是KnockoutJS的新手...
Cheers 干杯
Make sure the dom us fully loaded when you are creating view model instance and initiating the bindings. 创建视图模型实例并启动绑定时,请确保dom已完全加载。
If pure java script, use, 如果是纯Java脚本,请使用,
window.addEventListener('DOMContentLoaded', function(){
var trainingCourseViewModel = new TrainingCourseViewModel(@Html.Raw(data));
ko.applyBindings(trainingCourseViewModel);
});
OR if you are using the jQuery framework, 或者,如果您使用的是jQuery框架,
$(function(){
var trainingCourseViewModel = new TrainingCourseViewModel(@Html.Raw(data));
ko.applyBindings(trainingCourseViewModel);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.