首页 文章

嵌套的foreach绑定在knockoutJS中

提问于
浏览 次
0

我想通过敲击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"}]
knockout.js

1 回答

  • 0

    我删除了一些拼写错误，一切看起来都不错，但你的模型没有意义 .

    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>
    回复于

相关问题