ASP.NET MVC5 KnockoutJS映射“未捕獲的TypeError：無法讀取未定義的屬性'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已完全加載。

如果是純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);
});