javascript - 为什么 ObservableArray 对象的访问在子 foreach 中不起作用？

Question

您好，我是淘汰赛的新手，我遇到了这样一种情况，即我正在创建一个带有嵌套 foreach 的表，但内循环在与外循环匹配的条件下工作，但是当上面的对象是给定的普通数组时它正在工作。

viewModel.Subject=ko.observableArray(['Science','Math']);

下面给定的 observable 无法绑定子元素

viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);

 var viewModel={};
            viewModel.Subject=ko.observableArray(['Science','Math']);
            viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);
            viewModel.Students=ko.observableArray([
                {'StId':1,'StName':'John','Class':'8','Subject':'Science'},
                {'StId':2,'StName':'Martha','Class':'7','Subject':'Math'},
                {'StId':3,'StName':'George','Class':'6','Subject':'Math'},
                {'StId':4,'StName':'Martin','Class':'8','Subject':'Science'},
                {'StId':5,'StName':'Donny','Class':'7','Subject':'Math'},
                {'StId':6,'StName':'Kit','Class':'6','Subject':'Science'},
                {'StId':7,'StName':'Albert','Class':'8','Subject':'Math'}
            ]);
            ko.applyBindings(viewModel);

 body{
                background-color: white;
            }
            .subjectHeader{
                font-weight: bolder;
                font-size: 14px;

            }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class='table table-condensed table-bordered'>
            <thead>
                <th>St Id</th>
                <th>St Name</th>
                <th>Class</th>
                <th>Subject</th>
            </thead>
            <!--<tbody data-bind='foreach: viewModel.SubjectClass'>-->
            <tbody data-bind='foreach: viewModel.Subject'>
                <tr><td colspan="4">
                    <p class="subjectHeader">
                        <!--<span data-bind="text:Class"></span>
                        <span data-bind='text:Subject' style="margin-left: 40%;"></span>-->
                        <span data-bind='text:$data' style="margin-left: 40%;"></span>
                    </p>
                    <table class='table table-condensed table-bordered'> 
                            <tbody data-bind="foreach:viewModel.Students">
                                <!--<tr data-bind="if: Subject == $parentContext.Subject">-->
                                <tr data-bind="if: Subject == $parentContext.$data">
                                    <td data-bind='text:StId'></td>
                                    <td data-bind='text:StName'></td>
                                    <td data-bind='text:Subject'></td>
                                    <td data-bind='text:Class'></td>
                                </tr>
                            </tbody>
                        </table>
                </td>
                </tr>                
            </tbody>
        </table>

我理解这个问题是因为$parentContext因为它没有 observableArray 的引用，这就是为什么 'Subject' 数组正在工作，但没有 SubjectClass 用于绑定子循环。我评论了不工作的部分。

标签： javascripthtmlknockout.js

Answer 1

您只需要使用$parent保存实际数据的 ，而不是对$parentContext绑定上下文的引用。

 var viewModel={};
            viewModel.Subject=ko.observableArray(['Science','Math']);
            viewModel.SubjectClass=ko.observableArray([{'Class':'8','Subject':'Science'},{'Class':'7','Subject':'Math'},{'Class':'8','Subject':'Science'},{'Class':'6','Subject':'Math'}]);
            viewModel.Students=ko.observableArray([
                {'StId':1,'StName':'John','Class':'8','Subject':'Science'},
                {'StId':2,'StName':'Martha','Class':'7','Subject':'Math'},
                {'StId':3,'StName':'George','Class':'6','Subject':'Math'},
                {'StId':4,'StName':'Martin','Class':'8','Subject':'Science'},
                {'StId':5,'StName':'Donny','Class':'7','Subject':'Math'},
                {'StId':6,'StName':'Kit','Class':'6','Subject':'Science'},
                {'StId':7,'StName':'Albert','Class':'8','Subject':'Math'}
            ]);
            ko.applyBindings(viewModel);

 body{
                background-color: white;
            }
            .subjectHeader{
                font-weight: bolder;
                font-size: 14px;

            }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class='table table-condensed table-bordered'>
            <thead>
                <th>St Id</th>
                <th>St Name</th>
                <th>Class</th>
                <th>Subject</th>
            </thead>
            <tbody data-bind='foreach: viewModel.SubjectClass'>
            <!--<tbody data-bind='foreach: viewModel.Subject'>-->
                <tr><td colspan="4">
                    <p class="subjectHeader">
                        <span data-bind="text:Class"></span>
                        <span data-bind='text:Subject' style="margin-left: 40%;"></span>
                        <!--<span data-bind='text:$data' style="margin-left: 40%;"></span>-->
                    </p>
                    <table class='table table-condensed table-bordered'> 
                            <tbody data-bind="foreach:viewModel.Students">
                                <tr data-bind="if: Subject == $parent.Subject">
                                <!--<tr data-bind="if: Subject == $parentContext.$data">-->
                                    <td data-bind='text:StId'></td>
                                    <td data-bind='text:StName'></td>
                                    <td data-bind='text:Subject'></td>
                                    <td data-bind='text:Class'></td>
                                </tr>
                            </tbody>
                        </table>
                </td>
                </tr>                
            </tbody>
        </table>