knockout.js 如何修复“引用错误：索引未定义”的问题

db2dz4w8 于 2022-11-10 发布在其他

关注(0)|答案(3)|浏览(159)

我尝试用JavaScript应用程序连接REST服务器。使用 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);

});

然后我会收到“指涉错误：索引未定义”错误。
当我请求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：未定义索引”错误？

knockout.js

来源：https://stackoverflow.com/questions/56298890/how-to-fix-referenceerror-index-is-not-defined-problem

3条答案

按热度按时间

o8x7eapl1#

您的JSON看起来不错，使用3个参数作为mapping.fromJS的“options”参数，并没有什么问题。我的猜测是，这是一个上下文问题，你的标记试图绑定到哪个对象。如果你仍然在根级别的视图模型，绑定将失败，因为“Index”在根级别不存在。您需要一个foreach绑定来嵌套到“students”子对象中。
第一个

赞(0）回复(0）举报 2022-11-10

7cwmlq892#

直接取自docs
第一次提取数据时，应执行此操作
var viewModel = ko.mapping.fromJS(data);
之后每次从服务器接收到数据时
ko.mapping.fromJS(data, viewModel);个

赞(0）回复(0）举报 2022-11-10

lyr7nygr3#

我还设法用这种方法解决了我的问题：

'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"

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 如何修复“引用错误：索引未定义”的问题

3条答案

相关问题

热门标签

最新问答