在knockoutJS中嵌套的foreach绑定(Nested foreach binding in knockoutJS)

 我想通过敲击JS foreach绑定在AJAX数据的帮助下创建手风琴。 每个Accordion组都包含一个表，当在敲击JS点击绑定的帮助下点击特定的手风琴时，该表的数据应该通过另一个AJAX调用获取。 
 
 我面临的问题： 
 
 第一个foreach绑定工作正常，没有任何问题，它根据返回的数据创建确切数量的手风琴组。 手风琴上的Click绑定也很有效，并通过AJAX调用获得正确的数据。 
 
 然而，当我为每个绑定添加第二个时刻时，一切都崩溃了。 即使是在第一个手风琴组之后，foreach绑定也会停止渲染。 
 
 HTML： 
 
<div class="accordion" id="accordion" data-bind="foreach: years">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#accordion"
               data-toggle="collapse" href="" data-bind="click: $parent.get_statement, attr: { href: '#' + year0,}, text: year2 + ' ' + year0 + ' - ' + year1">Financial Year
                2014-15</a>
        </div>
        <div class="accordion-body collapse" id="" data-bind="attr: {id: year0}">
            <div class="accordion-inner">
                <table class="table">
                    <thead>
                    <tr>
                        <th>Column A</th>
                        <th>Column B</th>
                        <th>Column C</th>
                        <th>Column D</th>
                        <th>Column E</th>
                        <th>Column F</th>
                    </tr>
                    </thead>
                    <tbody data-bind="foreach: statements">
                    <tr>
                        <td data-bind="text: A">cell is row 0, column 0</td>
                        <td data-bind="text: B">cell is row 0, column 1</td>
                        <td data-bind="text: C">cell is row 0, column 2</td>
                        <td data-bind="text: D">cell is row 0, column 3</td>
                        <td data-bind="text: E">cell is row 0, column 4</td>
                        <td data-bind="text: F">cell is row 0, column 5</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
 
 JS代码： 
 
this.years = ko.observableArray();
this.statements = ko.observableArray();

$.ajax({
            url: "site_api/user_data.php",
            type: "get",
            data: {data_type: getParam("id"), request_type: "account_statement_years", data_value: 0},
            cache: false,
            success: function(result) {
                var data = $.parseJSON(result);
                self.years(data);
            }
        });

        this.get_statement = function() {
            var c = self.years.indexOf(this);
            $.ajax({
                url: "site_api/user_data.php",
                type: "get",
                data: {data_type: getParam("id"), request_type: "account_statement_data", data_value: self.years()[c].year0},
                cache: false,
                success: function(result) {
                    var data = $.parseJSON(result);
                    self.statements(data);
                }
            });
        };
 
 样本数据： 
 
Years: [{year0: 2015, year2:16, year3: ABC},{year0: 2014, year2:15, year3: DEF},{year0: 2013, year2:14, year3: GHI}]
 
 声明： 
 
[{"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"},
{"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"},
{"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"}]

I want to create accordions with the help of AJAX data through knockout JS foreach binding. Each Accordion group includes a table whose data is supposed to be fetched through another AJAX call when the particular accordion is clicked with the help of knockout JS click binding.
 
Issue that i am facing:
 
First foreach binding works well without any issues and it creates the exact number of accordion groups as per the data returned. Click binding on accordion also works well and gets correct data through AJAX call.
 
However, the moment i add the second for each binding everything falls apart. Even the years foreach binding stops rendering after the first accordion group.
 
HTML:
 
<div class="accordion" id="accordion" data-bind="foreach: years">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#accordion"
               data-toggle="collapse" href="" data-bind="click: $parent.get_statement, attr: { href: '#' + year0,}, text: year2 + ' ' + year0 + ' - ' + year1">Financial Year
                2014-15</a>
        </div>
        <div class="accordion-body collapse" id="" data-bind="attr: {id: year0}">
            <div class="accordion-inner">
                <table class="table">
                    <thead>
                    <tr>
                        <th>Column A</th>
                        <th>Column B</th>
                        <th>Column C</th>
                        <th>Column D</th>
                        <th>Column E</th>
                        <th>Column F</th>
                    </tr>
                    </thead>
                    <tbody data-bind="foreach: statements">
                    <tr>
                        <td data-bind="text: A">cell is row 0, column 0</td>
                        <td data-bind="text: B">cell is row 0, column 1</td>
                        <td data-bind="text: C">cell is row 0, column 2</td>
                        <td data-bind="text: D">cell is row 0, column 3</td>
                        <td data-bind="text: E">cell is row 0, column 4</td>
                        <td data-bind="text: F">cell is row 0, column 5</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
 
JS Code: 
 
this.years = ko.observableArray();
this.statements = ko.observableArray();

$.ajax({
            url: "site_api/user_data.php",
            type: "get",
            data: {data_type: getParam("id"), request_type: "account_statement_years", data_value: 0},
            cache: false,
            success: function(result) {
                var data = $.parseJSON(result);
                self.years(data);
            }
        });

        this.get_statement = function() {
            var c = self.years.indexOf(this);
            $.ajax({
                url: "site_api/user_data.php",
                type: "get",
                data: {data_type: getParam("id"), request_type: "account_statement_data", data_value: self.years()[c].year0},
                cache: false,
                success: function(result) {
                    var data = $.parseJSON(result);
                    self.statements(data);
                }
            });
        };
 
Sample Data:
 
Years: [{year0: 2015, year2:16, year3: ABC},{year0: 2014, year2:15, year3: DEF},{year0: 2013, year2:14, year3: GHI}]
 
Statements:
 
[{"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"},
{"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"},
{"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"}]

原文：https://stackoverflow.com/questions/31254763