Question

我需要一些帮助来弄清楚如何将JSON结果绑定到MVC4中的视图。

我有以下视图模型，它返回看似正确的JSON;

查看模型

function task(name, duedate, overdue, phase, project, description, groups) {

var self = this;

self.name = ko.observable(name);
self.duedate = ko.observable(duedate);
self.overdue = ko.observable(overdue);
self.phase = ko.observable(phase);
self.project = ko.observable(project);
self.description = ko.observable(description);
self.group = ko.observable(groups);
}


function bTask() {
var self = this;
var parts = document.location.href.split("/");
var id = parts[parts.length - 1];
self.atasks = ko.observableArray([]);

$.getJSON("/api/tasks/GetProjectTasks?id="+id+"&stat=Active", function (data) {
    $.each(data, function (key, val) {
        self.atasks.push(new task(val.Name, moment(val.DueDate).format('DD/MM/YYYY'),  val.overdue, val.Phase, val.Project, val.Description, val.Goups));

    });
 });
}

$(document).ready(function () {
var aTask = new bTask();


ko.applyBindings(aTask, document.getElementById('activetasks'));

function onLoop() {
    var self = aTask;
    var parts = document.location.href.split("/");
    var id = parts[parts.length - 1];

    $.getJSON("/api/tasks/GetProjectTasks?id=" + id + "&stat=Active", function (data) {
        self.atasks.removeAll();
        $.each(data, function (key, val) {
           self.atasks.push(new task(val.Name,  moment(val.DueDate).format('DD/MM/YYYY'), val.overdue, val.Phase, val.Project,  val.Description, val.Goups));
         });

     });



  }

 setInterval(onLoop, 10000);
});

从api返回的JSON如下;

[{"$id":"1","DueDate":"2013-06-05T00:00:00","Id":4,"Name":"Address UAT    Issues","Description":"Task 4 Description","Status":"Active","Phase":"Requirements   Review","Project":"RAP C1","StartDate":"2013-05-31T17:28:55.46","overdue":"error","Groups":  [{"$id":"2","Name":"Group 1","Description":"Group 1   Description","ClientId":1,"GroupType":null,"Id":1},{"$id":"3","Name":"Group   2","Description":"Group 2 Description","ClientId":1,"GroupType":null,"Id":2}]}]

正如您所看到的，它正在返回1个具有两个组的任务，这是正确的。

在我的视图中循环执行任务允许我访问任务的任何属性，但我不确定如何访问返回的组和属性。

我如何在视图中绑定到此？

我是否可以在foreach的任务范围内进行预告？

任何帮助解释这个的人都非常感激。

提前致谢

约翰

Answer 1

您可以使用foreach绑定。

我根据您的数据制作了fiddle。

<div data-bind="foreach : Groups">
    <span data-bind="text : $id"></span>
    <span data-bind="text : Name"></span>
    <span data-bind="text : Description"></span>
    <span data-bind="text : GroupType"></span>    
    <span data-bind="text : Id"></span>
    <br/>
</div>

我希望它有所帮助。

从getJSON访问返回的可枚举子记录的属性

1 个答案: