Question

我正在使用knockout创建一个组件，当我点击链接时我无法更新显示。然而，更改事件正在更改当前选定的按钮，显示屏不会在屏幕上更新。

组件

ko.components.register('bs-dropdownbutton', {
    template: 
        '<span class="btn-group pull-left" data-bind="visible: Loaded"> \
            <button class="btn btn-default" data-bind="text: Selected.ButtonText, click: ButtonListener">Test</button> \
            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"> \
                <span class="caret"></span> \
                </button>  \
            <ul class="dropdown-menu"> \
                <!-- ko foreach: Buttons --> \
                <li data-bind="click: $parent.ChangeSelected"> \
                    <a href="#" data-bind="text: ButtonText"></a> \
                </li> \
                <!-- /ko --> \
            </ul> \
        </span>',
    viewModel: {
        createViewModel: function (params, componentInfo) {
            var self = this;
            var vm = params.Buttons();

            self.Selected = vm.SelectedButton();
            self.Buttons = vm.Buttons();
            self.ChangeSelected = function (btn, event) {
                self.Selected = btn;
            }

            self.ButtonListener = function () {
                vm.ButtonListener(self.Selected);
            }

            self.Loaded = self.Buttons !== undefined;
            return self;
        }
    }
});

查看模型

   function recordManagement() {
        var recordManagementVM = function () {
            var self = this;
            console.log("test");

            var Button = function (btnValue, btnText) {
                this.ButtonText = btnText;
                this.ButtonValue = btnValue;
            }

            function printOption(option) {
                switch (option) {
                    case "Excel":
                        alert("Printing Excel"); return;
                    case "Display":
                        alert("Printing Display"); return;
                    default:
                        alert("Unknown Document Type"); return;
                }

            }

            var btnList = [
                new Button('Display', "Display"),
                new Button('Excel', "Excel"),
                new Button('PDF', "PDF"),
                new Button('Word', "Word"),
            ];

            function ButtonGroup () {
                var self = this;
                self.Buttons = ko.observableArray(btnList),
                self.SelectedButton = ko.observable(btnList[0]),

                self.SelectedButton.subscribe(function () {
                    console.log(arguments);
                });

                self.GetSelected = function (btn, event) {
                    self.SelectedButton(btn[0]);
                },

                self.ButtonListener = function (btn) {
                    printOption(btn.ButtonValue);
                }
                return self;
            };


            self.Buttons = ko.observable(new ButtonGroup());
            //self.SelectedButton = ko.observable(btnList[0]);

        }; //--End VM --



        ko.applyBindings(new recordManagementVM(), document.getElementById("recordmanagement"));
    }

    recordManagement();

JSFiddle

Answer 1

如果你想要这里的文字：

<button class="btn btn-default" data-bind="text: Selected.ButtonText, click: ButtonListener">Test</button>

要更新为Selected更改，您必须使其可观察。现在，只渲染第一个选择。

要使其可观察，您可以将self.Selected = vm.SelectedButton();更改为self.Selected = ko.observable(vm.SelectedButton());

使用self.Selected(btn);而不是self.Selected = btn;

进行设置

数据将其与data-bind="text: Selected().ButtonText绑定，而不是data-bind="text: Selected.ButtonText

Knockout显示不更新

1 个答案: