淘汰赛中的嵌套 foreach 绑定

Question

我想通过淘汰 JS foreach 绑定在 AJAX 数据的帮助下创建手风琴。每个 Accordion 组都包含一个表，当在淘汰 JS 点击绑定的帮助下点击特定的手风琴时，应该通过另一个 AJAX 调用来获取该表的数据。

我面临的问题：

第一个 foreach 绑定运行良好，没有任何问题，它会根据返回的数据创建准确数量的手风琴组。手风琴上的点击绑定也很有效，可以通过 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"}]

Answer 1

我删除了一些错别字，一切看起来都很好，但你的模型没有意义。

function ViewModel() {
    var self = this;
    self.years = ko.observableArray();
    self.statements = ko.observableArray();

    this.years([
        {year0: 2015, year2:16, year3: 'ABC'},
        {year0: 2014, year2:15, year3: 'DEF'},
        {year0: 2013, year2:14, year3: 'GHI'}
    ]);


    self.get_statement = function() {
         //your ajax here 
        self.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"}
        ]);
    };
};

ko.applyBindings(new ViewModel());

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">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: $root.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>

查看实际操作：http://jsfiddle.net/n7nqp5uv/1/

我建议您使用这样的视图模型：

function Year(name, statements) {
   var self = this;
   self.name = name;
   self.statements = ko.observableArray(statements);
};

funtion ViewModel() {
  //...
  self.years = ko.observableArray();
  //load the years like this (arrayOfYears returned from ajax):
  //self.years(ko.utils.arrayMap(arrayOfYears, function (y) {
  //    return new Year(y.name, []);
  //};

  //function to load the year's statements
}

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: $root.yourFunctionToLoadTheStatements, attr: { href: '#' + year0,}, text: year2 + ' ' + year0">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>