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：未定义索引”错误。

当我请求我的REST应用程序时，我得到以下JSON：

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

}
   ]

在ajax函数中，完成的结果是：

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

“ ReferenceError：未定义索引”错误的原因可能是什么？

Answer 1

直接从docs

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

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

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

ko.mapping.fromJS(data, viewModel);

Answer 2

您的JSON看起来不错，并且为您的mapping.fromJS使用3个参数并将空对象作为“ options”参数没有问题。我的猜测是这是上下文问题，您的标记试图与之绑定。如果您仍处于根级别，则视图模型将失败，因为“索引”在根级别不存在。您需要foreach绑定才能嵌套到“学生”子对象中。

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"

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

3 个答案: