如何解决“ReferenceError：未定义索引”问题

Question

我尝试将我的 REST 服务器与 JavaScript 应用程序连接起来。使用 ajax 查询我得到了正确的 JSON，但我无法将它绑定到我的 HTML 网站。我在 HTML 中使用数据绑定：

<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: index is not defined”错误。

当我请求我的 REST 应用程序时，我得到以下 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

您的 JSON 看起来不错，并且为您的 mapping.fromJS 使用 3 个参数并将一个空对象作为“选项”参数并没有错。我的猜测是，这是您的标记试图绑定到哪个对象的上下文问题。如果您仍在根级别视图模型中，则绑定将失败，因为根级别不存在“索引”。您需要一个 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 2

直接取自docs

第一次获取数据时应该这样做

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

然后每次从服务器接收到数据之后

ko.mapping.fromJS(data, viewModel);

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"