javascript - 数据未使用KnockoutJS绑定(bind)到表

我正在第一个定制的KO实现上工作，我已经将数据绑定到页面中的表上，但是不是它没有绑定到表上。我可以验证我的Web服务是否正在被调用并且正在返回数据。但是，我不知道为什么没有将数据加载到表中，因为我没有收到任何错误。

我肯定我错过了一些简单的事情，因为我是这个新手。 :)

我正在使用KO 3.1.0。

页面标记

<table class="dnnGrid">
    <thead>
        <tr class="dnnGridHeader">
            <th>Task ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Date Updated</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: tasks">
        <tr class="dnnGridRow">
            <td data-bind="text: ID"></td>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Description"></td>
            <td data-bind="text: LastUpdatedDate"></td>
        </tr>
    </tbody>
</table>

页面脚本

var sf = $.ServicesFramework(<%=ModuleId %>);
var userId = <%=UserId%>;
var serviceUrl = sf.getServiceRoot('POC');
var moduleId = sf.getModuleId();

$(document).ready(function() {

    ko.applyBindings(TaskViewModel);

    GetTasks();

    $('#lnkSave').click(function() {
        SaveTask();
        GetTasks();
    });
});

进口脚本

var Task = function(data) {

data = data || {};

var self = this;

self.ID = ko.observable(data.ID);
self.ModuleId = ko.observable(data.ModelId);
self.ContentItemId = ko.observable(data.ContentItemId);
self.Name = ko.observable(data.Name);
self.Description = ko.observable(data.Description);
self.LastUpdatedDate = ko.observable(data.LastUpdatedDate);
self.LastUpdatedBy = ko.observable(data.LastUpdatedBy);
}
var TaskViewModel = function(items) {
var self = this;

var newTask = {
    'ID': ko.observable(),
    'ModuleId': ko.observable(),
    'ContentItemId': ko.observable(),
    'Name': ko.observable(),
    'Description': ko.observable(),
    'LastUpdatedDate': ko.observable(),
    'LastUpdatedBy': ko.observable()
};
self.tasks = ko.observableArray(ko.utils.arrayMap(items, function (data) {
    return new Task(data);
}));

self.updateTask = function (task) {
    GetTasks();
}
}
function SaveTask() {
var task = {
    'ModuleId': moduleId,
    'LastUpdatedBy': userId,
    'Name': $('#txtName').val(),
    'Description': $('#txtDescription').val()
}

$.ajax({
    type: 'POST',
    url: serviceUrl + 'Task/CreateTask',
    data: JSON.stringify(task),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    beforeSend: sf.setModuleHeaders,
    success: function (data) {
        var results = $.parseJSON(data);
        ParseResults(results, viewModel);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("STATUS: " + xhr.status + "\nERROR:\n" + thrownError);
    }
});
}
function GetTasks() {
if (TaskViewModel) {
    if (TaskViewModel.tasks) {
        TaskViewModel.tasks.removeAll();
    }
}

$.ajax({
    type: 'GET',
    url: serviceUrl + 'Task/GetTasks?ModuleId=' + moduleId,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    beforeSend: sf.setModuleHeaders,
    success: function (data) {
        var results = $.parseJSON(data);
        TaskViewModel.tasks = results;
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("STATUS: " + xhr.status + "\nERROR:\n" + thrownError);
    }
});
}

最佳答案

尝试将这行ko.applyBindings(TaskViewModel)移动到.ready函数的底部

$(document).ready(function() {

    GetTasks();

    $('#lnkSave').click(function() {
        SaveTask();
        GetTasks();
    });
    ko.applyBindings(TaskViewModel);
});

在此行之后，var results = $.parseJSON(data);添加一个调试器。声明并打开chrome开发人员工具（F12键），刷新页面并使用F10键逐步浏览代码。

此时，您应该能够在results中看到已解析的数据。如果不是必需的格式，则可能需要分配TaskViewModel.tasks像这样

TaskViewModel.tasks = ko.utils.arrayMap(results, function (task) {
                return new Task(task);
            });

关于javascript - 数据未使用KnockoutJS绑定(bind)到表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29001208/