如何修復“ReferenceError：index is not defined”問題

Question

我嘗試將我的REST服務器與JavaScript應用程序連接。 使用ajax查詢我得到了正確的JSON，但我無法將其綁定到我的HTML網站。 我在HTML中使用data-bind：

<tbody>
  <tr >
    <td> <input type="number" data-bind="value: index" name="index" readonly>  </td>
    <td> <input type="text" data-bind="value: name" name="name"required> </td>
    <td> <input type="text" data-bind="value: surname" name="surname"required> </td>
    <td> <input type="date" data-bind="value: birthdate" name="birthdate" min="1950-01-01" max="2050-01-01" required> </td>
    <td><button type="button" >Edit</button></td>
  </tr>
</tbody>

在.js文件中我有以下代碼：

'use strict';

var URL = 'http://localhost:8000/'

$(document).ready(function(){

var StateViewModel = function () {
    var self = this;
    self.students = ko.observableArray();

    $.ajax({
        url: URL + 'students',
        type: 'GET',
        dataType: 'json',
        accepts: {
            contentType: 'application/json'
        }
    }).done(function(result) {
        console.log(result)
        ko.mapping.fromJS(result, self.students);
    });
}

var model = new StateViewModel();
ko.applyBindings(model);

});

我得到“ReferenceError：索引未定義”錯誤。

當我請求我的REST appI低於JSON時：

[
{
    "index": 127001,
    "name": "John",
    "surname": "Smith",
    "birthdate": "1996-11-11"
},
{
    "index": 127002,
    "name": "Abcd",
    "surname": "Xyz",
    "birthdate": "1996-11-01"

}
   ]

並在ajax函數.done結果是：

0: Object { index: 127001, name: "John", surname: "Smith", … }
1: Object { index: 127002, name: "Abcd", surname: "Xyz", … }

可能是“ReferenceError：index is not defined”錯誤的原因是什么？

Answer 1

直接從文檔中獲取

第一次獲取數據時，您應該這樣做

var viewModel = ko.mapping.fromJS(data);

然后每次從服務器收到數據

ko.mapping.fromJS(data, viewModel);

Answer 2

你的JSON看起來很好，使用3個參數進行map.fromJS並將空對象作為“options”參數沒有任何問題。 我的猜測是，這是一個上下文問題，你的標記試圖綁定到哪個對象。 如果您仍處於根級別視圖模型，則綁定將失敗，因為根級別不存在“索引”。 你需要一個foreach綁定嵌套到“students”子對象中。

 var URL = 'http://localhost:8000/'; var sampleData = [{ "index": 127001, "name": "John", "surname": "Smith", "birthdate": "1996-11-11" }, { "index": 127002, "name": "Abcd", "surname": "Xyz", "birthdate": "1996-11-01" } ]; var StateViewModel = function() { var self = this; self.students = ko.observableArray(); setTimeout(function() { //console.log(sampleData) ko.mapping.fromJS(sampleData, {}, self.students); }, 1000); } var model = new StateViewModel(); ko.applyBindings(model); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> <table> <tbody data-bind="foreach: students"> <tr> <td> <input type="number" data-bind="value: index" name="index" readonly> </td> <td> <input type="text" data-bind="value: name" name="name" required> </td> <td> <input type="text" data-bind="value: surname" name="surname" required> </td> <td> <input type="date" data-bind="value: birthdate" name="birthdate" min="1950-01-01" max="2050-01-01" required> </td> <td><button type="button">Edit</button></td> </tr> </tbody> </table> 

Answer 3

我也設法通過這種方式解決了我的問題：

'use strict';

var URL = 'http://localhost:8000/'

$(document).ready(function(){
    console.log("Abc")
    ko.applyBindings(new customerViewModel());
});

function customerViewModel() {
    var self = this;
    self.studentsList = ko.observableArray();

    $.ajax({
        type: 'GET',
        url: URL + 'students',
        contentType: "application/json",
        dataType: "json",
    success: function(data) {
        console.log(data)
        var observableData = ko.mapping.fromJS(data);
        var array = observableData();
        self.studentsList(array);
     },
    error:function(jq, st, error){
        alert(error);
    }
});
}

並使用foreach

data-bind="foreach: studentsList"