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

Question

我正在开发我的第一个自定义 KO 实现，并且我将数据绑定(bind)到我的页面中的表，但不是它没有绑定(bind)到它。我可以验证我的网络服务是否正在被调用并且正在返回数据。但是，我不知道为什么数据没有加载到表中，因为我没有收到任何错误。

我确信我错过了一些简单的东西，因为我是这方面的新手。 :)

我使用的是 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);
    }
});
}

Answer 1

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

$(document).ready(function() {

    GetTasks();

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

在此行之后，var results = $.parseJSON(data); 添加调试器；语句并打开 Chrome 开发者工具(F12 键)，刷新页面并使用 F10 键单步执行代码。

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

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