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>

更新

一些注意事项：

我使用了错误的属性：＆＃34; data_bind＆＃34;而不是＆＃34;数据绑定＆＃34;。我现在更正了它，更新的代码在这里：https://jsfiddle.net/9Lc144jv/2/
即使我做了那个修复，它仍然无法正常工作
当我将其复制并粘贴到普通.html文件并运行它时，我可以在Firebug中看到一些有趣的内容：

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

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

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

Answer 1

您在绑定后设置reportModel加上我必须将函数调用添加到按钮（）。

略有变化：

    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/

淘汰赛预告不起作用

1 个答案: