Question

我有一个JSON对象，它还包含一个嵌套项 - TagList和TaskRecordList。

我想将EntityCode和EntityName显示为＆＃39;父母＆＃39;然后显示TagList，然后显示最后一个嵌套层 - 在此下面的TaskRecordList数据。

如何使用Knockout执行此操作？

＆＃13;

var viewModel = function(data) {
    var self = this;
   
    // variables   
    self.taskRecords = ko.observableArray([
   		    {
        "EntityCode": "SP00",
        "EntityName": "Sample",
        "TagList": [
            {
                "TagID": 3,
                "TagName": "Level 3",
                "TaskRecordList": [
                    {
                        "TaskRecordID": 33,
                        "TaskName": "Cash",
                        "Period": "2017-05-16T00:00:00"
                    },
                    {
                        "TaskRecordID": 34,
                        "TaskName": "CashTest",
                        "Period": "2017-05-16T00:00:00"
                    }
                ]
            },
            {
                "TagID": 2,
                "TagName": "Level 5",
                "TaskRecordList": [
                    {
                        "TaskRecordID": 27,
                        "TaskName": "FileIN",
                        "Period": "2017-05-16T00:00:00"
                    },
                    {
                        "TaskRecordID": 21,
                        "TaskName": "FileTest",
                        "Period": "2017-05-16T00:00:00"
                    },
                    {
                        "TaskRecordID": 35,
                        "TaskName": "OTE Rec",
                        "Period": "2017-05-16T00:00:00"
                    }
                ]
            }
        ]
    },
    {
        "EntityCode": "DEMO",
        "EntityName": "Demo Fund",
        "TagList": []
    }
    ]); 
   
};

ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-hover">
        <thead>
            <tr>
                <th>Entity Code</th>
                <th>Entity Name</th>
                <th>TagID</th>
                <th>TagName</th>
                <th>TaskRecordID</th>
                <th>TaskName</th>
            </tr>
        </thead>
        <tbody id="sortable" data-bind="foreach: taskRecords">
            <tr class="ui-state-default ui-state-disabled" >
                <td class="ui-state-default" data-bind="text: EntityCode"></td>
                <td class="ui-state-default" data-bind="text: EntityName"></td>
                <td></td>
                <td></td>
            </tr>
            <tr data-bind="foreach: TagList">
                <td></td>
                <td></td>
                <td class="ui-state-default" data-bind="text: TagID"></td>
                <td class="ui-state-default" data-bind="text: TagName"></td>
            </tr>
            <tr data-bind="foreach: TaskRecordList">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="ui-state-default" data-bind="text: TaskRecordID"></td>
                <td class="ui-state-default" data-bind="text: TaskName"></td>
            </tr>
        </tbody>
    </table>

＆＃13;

JSFiddle

Answer 1

看起来你几乎就在那里。您的数据结构目前不一致，所以我猜你希望你的对象是{"TagID":3, "TagName": "L3"}而不是{"TagID":5}, {"TagName": "L5"}，否则你有两种不同的对象格式，当它试图找到“TagName”时绑定会失败第一个对象，也是当它试图在第二个对象中找到“TagID”时。

然后需要调整您的绑定，以便在父foreach中有一个foreach。您可以将第一个移动到tbody，以便第二个foreach嵌套在其中。

var viewModel = function(data) {
    var self = this;
   
    // variables   
    self.taskRecords = ko.observableArray([
   		{
      	EntityCode: 1, 
        EntityName: "ManualItems", 
        TaskRecordList: [
        	{"TagID":3, "TagName": "L3"}
         ]},
    	{
      	EntityCode: 2, 
        EntityName: "Trades", 
        TaskRecordList: [
        	{"TagID":5, "TagName": "L5"}
         ]}
    ]); 
   
};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-hover">
        <thead>
            <tr>
                <th>Entity Code</th>
                <th>Entity Name</th>
                <th>TagID</th>
                <th>TagName</th>
            </tr>
        </thead>
        <tbody id="sortable" data-bind="foreach: taskRecords">
            <tr class="ui-state-default ui-state-disabled" >
                <td class="ui-state-default" data-bind="text: EntityCode"></td>
                <td class="ui-state-default" data-bind="text: EntityName"></td>
                <td></td>
                <td></td>
            </tr>
            <tr data-bind="foreach: TaskRecordList">
                <td></td>
                <td></td>
                <td class="ui-state-default" data-bind="text: TagID"></td>
                <td class="ui-state-default" data-bind="text: TagName"></td>
            </tr>
        </tbody>
    </table>

Answer 2

@jasonspake谢谢。现在有效 - http://jsfiddle.net/jlspake/v2L1ny8r/7/

＆＃13;

var viewModel = function(data) {
    var self = this;
   
    // variables   
    self.taskRecords = ko.observableArray([
   		    {
        "EntityCode": "SP00",
        "EntityName": "Sample",
        "TagList": [
            {
                "TagID": 3,
                "TagName": "Level 3",
                "TaskRecordList": [
                    {
                        "TaskRecordID": 33,
                        "TaskName": "Cash",
                        "Period": "2017-05-16T00:00:00"
                    },
                    {
                        "TaskRecordID": 34,
                        "TaskName": "CashTest",
                        "Period": "2017-05-16T00:00:00"
                    }
                ]
            },
            {
                "TagID": 2,
                "TagName": "Level 5",
                "TaskRecordList": [
                    {
                        "TaskRecordID": 27,
                        "TaskName": "FileIN",
                        "Period": "2017-05-16T00:00:00"
                    },
                    {
                        "TaskRecordID": 21,
                        "TaskName": "FileTest",
                        "Period": "2017-05-16T00:00:00"
                    },
                    {
                        "TaskRecordID": 35,
                        "TaskName": "OTE Rec",
                        "Period": "2017-05-16T00:00:00"
                    }
                ]
            }
        ]
    },
    {
        "EntityCode": "DEMO",
        "EntityName": "Demo Fund",
        "TagList": []
    }
    ]); 
   
};

ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-hover">
        <thead>
            <tr>
                <th>Entity Code</th>
                <th>Entity Name</th>
                <th>TagID</th>
                <th>TagName</th>
                <th>TaskRecordID</th>
                <th>TaskName</th>
            </tr>
        </thead>
        <tbody id="sortable" data-bind="foreach: taskRecords">
            <tr class="ui-state-default ui-state-disabled" >
                <td class="ui-state-default" data-bind="text: EntityCode"></td>
                <td class="ui-state-default" data-bind="text: EntityName"></td>
                <td></td>
                <td></td>
            </tr>
            <!--ko foreach: TagList-->
            <tr>
                <td></td>
                <td></td>
                <td class="ui-state-default" data-bind="text: TagID"></td>
                <td class="ui-state-default" data-bind="text: TagName"></td>
            </tr>
            <tr data-bind="foreach: TaskRecordList">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="ui-state-default" data-bind="text: TaskRecordID"></td>
                <td class="ui-state-default" data-bind="text: TaskName"></td>
            </tr>
            <!--/ko-->
        </tbody>
    </table>

＆＃13;

在HTML表中显示嵌套的JSON数据对象

2 个答案: