淘汰赛显示未更新答案

【问题标题】：Knockout display not updating淘汰赛显示未更新
【发布时间】：2016-03-17 20:51:22
【问题描述】：

我正在使用敲除创建组件，但在单击链接时无法更新显示。更改事件正在工作，但是更改当前选定的按钮，显示只是没有在屏幕上更新。

组件

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

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

如果你想要这里的文字：

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

要随着Selected 的变化而更新，您必须使其可观察到。现在，只渲染了第一个 Selection。

为了使其可观察，您可以将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进行数据绑定

【讨论】：