Question

我有一个SlickGrid，用户可以使用CheckboxSelectColumn插件选择行。

我有一个html按钮，我希望data-bind提交按钮只有在用户选择了五行后才能看到，或者如果他们取消选中足够的行到少于五行的位置，则禁用该按钮。

<button data-bind="click: submit, enable: hasSelectedFivePolicies">Submit</button>

在我的淘汰赛脚本中，我创建了一个observable，它在页面首次加载时将按钮设置为禁用。但是，一旦用户选择了五个或更多项目，则不启用该按钮。

如果用户在SlickGrid中检查了五个或更多项目，我该如何启用该按钮？

function ViewModel() {
            var self = this;

            var hasFive = gridUnredeemed.getSelectedRows().length >= 5;
            self.hasSelectedFivePolicies = ko.observable(hasFive);

            self.getCheckedItems = function () {
                // get the selected stuff
                console.log("Getting checked items...");
                var selectedData = [], selectedIndexes;

                selectedIndexes = gridUnredeemed.getSelectedRows();
                $.each(selectedIndexes, function (index, value) {
                    var stuff = gridUnredeemed.getData()[value];
                    selectedData.push(stuff);
                    console.log(stuff);
                });
                return selectedData;
            }

            self.getSelectedPolicyNumbers = function () {
                var items = self.getCheckedItems();
                var policyNumbers = [];
                $.each(items, function () {
                    $.each(this, function (name, value) {
                        if (name === "PolicyNumber") policyNumbers.push(value);
                    });
                })
                return policyNumbers;
            }

            self.getSelectedPolicies = function () {
                var items = self.getCheckedItems();
                var policies = [];
                $.each(items, function () {
                    policies.push(new policyToRedeem(this.PolicyNumber, this.IssueDate, this.InsuredName, this.PolicyStatus, this.PolicyType));
                });

                return policies;
            }

Answer 1

以下一行：

var hasFive = gridUnredeemed.getSelectedRows().length >= 5;

不足以让Knockout在getSelectedRows()和hasSelectedFivePolicies可观察对象之间创建依赖关系。

不仅如此，即使创建了依赖项，它仍然不够，因为当getSelectedRows发生更改时，Knockout将不会收到通知。

您需要手动订阅onSelectedRowsChanged事件，并相应地更改hasSelectedFivePolicies可观察值。

例如（假设gridUnredeemed是对网格实例的引用）：

gridUnredeemed.onSelectedRowsChanged.subscribe(function(e) {
    var hasFiveRecalc = gridUnredeemed.getSelectedRows().length >= 5;
    self.hasSelectedFivePolicies(hasFiveRecalc);
});

用户在SlickGrid中选择了五个或更多项目时启用按钮

1 个答案: