敲除 foreach 绑定不起作用

Question

我正在尝试让 Knockout foreach 绑定在我的代码中工作。我以前做过很多次，但在这种特殊情况下，我似乎做对了。我一定是在这里做错了什么，但我看不到。我在这里创建了一个 jsfiddle：https://jsfiddle.net/9Lc144jv/

JavaScript:

var ReportModel = function (parent) {
            var self = this;
            self.parent = parent;
            self.filters = ko.observableArray([]);

            self.addFilter = function () {
                self.filters.push({ logicOperator: 0, columnName: null, comparisonOperator: 0, value: null });
            };

            self.removeFilter = function () {
                self.filters.remove(this);
            };
        };

        var ViewModel = function () {
            var self = this;
            self.reportModel = false;

            self.init = function () {
                self.reportModel = new ReportModel(self);
            };
        };

        var viewModel;
            $(document).ready(function () {
                viewModel = new ViewModel();
                ko.applyBindings(viewModel);
                viewModel.init();
            });

HTML:

<body>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>Column</th>
                <th>Operator</th>
                <th>Value</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <!-- ko foreach: reportModel.filters -->
            <tr>
                <td><input type="text" class="form-control" data_bind="value: logicOperator" /></td>
                <td><input type="text" class="form-control" data_bind="value: columnName" /></td>
                <td><input type="text" class="form-control" data_bind="value: comparisonOperator" /></td>
                <td><input type="text" class="form-control" data_bind="value: value" /></td>
                <td>
                    <button type="button" class="btn btn-danger" data-bind="click: $parent.removeFilter">
                        Remove
                    </button>
                </td>
            </tr>
            <!-- /ko -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" style="text-align: right;">
                    <button type="button" class="btn btn-primary" data-bind="click: reportModel.addFilter">
                        Add
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
</body>

更新

一些注意事项：

我使用了错误的属性："data_bind" 而不是 "data-bind"。我现在更正了它，更新后的代码在这里：https://jsfiddle.net/9Lc144jv/2/
即使我进行了修复，它仍然无法正常工作
当我将它复制并粘贴到一个普通的 .html 文件并运行它时，我可以在 Firebug:[=16= 中看到一些有趣的东西]

如您所见，运行命令 window 中的以下脚本显示在单击“添加”之前集合中没有任何内容，然后是：

JSON.stringify(viewModel.reportModel.filters());

所以新对象在可观察数组中，但它没有绑定到 foreach 块中的 table。但为什么？据我所知，一切看起来都很好……但也许我需要一双新的眼睛来看待这个问题。有人请告诉我我在这里做错了什么......

Answer 1

您在绑定之后设置 reportModel 而且我必须将函数调用添加到 buttons() 。

细微变化：

    var ReportModel = function (parent) {
        var self = this;
        self.parent = parent;
        self.filters = ko.observableArray([]);

        self.addFilter = function () {
            self.filters.push({ logicOperator: 0, columnName: null, comparisonOperator: 0, value: null });
        };

        self.removeFilter = function () {
            self.filters.remove(this);
        };
    };

    var ViewModel = function () {
        var self = this;
        self.reportModel = new ReportModel(self);

        self.init = function () {
            console.info(self);
    //self.reportModel = new ReportModel(self);
        };
    };

    var viewModel;
        $(document).ready(function () {
            viewModel = new ViewModel();
            ko.applyBindings(viewModel);
            viewModel.init();
        });

HTML

<body>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>Column</th>
                <th>Operator</th>
                <th>Value</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <!-- ko foreach: reportModel.filters -->
            <tr>
                <td><input type="text" class="form-control" data_bind="value: logicOperator" /></td>
                <td><input type="text" class="form-control" data_bind="value: columnName" /></td>
                <td><input type="text" class="form-control" data_bind="value: comparisonOperator" /></td>
                <td><input type="text" class="form-control" data_bind="value: value" /></td>
                <td>
                    <button type="button" class="btn btn-danger" data-bind="click: $parent.removeFilter()">
                        Remove
                    </button>
                </td>
            </tr>
            <!-- /ko -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" style="text-align: right;">
                    <button type="button" class="btn btn-primary" data-bind="click: reportModel.addFilter()">
                        Add
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
</body>

https://jsfiddle.net/vw2kngqq/

敲除 foreach 绑定不起作用

Knockout foreach bidning not working

javascript

knockout.js

knockout-3.0