Foreach和单击数据绑定以消除列表和下拉列表之间的差异

Question

我设法使用以下代码更改了应用程序的视图，可以在其中单击列表的元素

<ul data-bind="foreach: panels">
    <li><a href="#" data-bind="click: $parent.goto, text:'Load '+$data"></a></li>
</ul>

我尝试实现相同的功能，但有一个下拉列表。 我的代码如下

<select data-bind="foreach: panels">
    <option data-bind="value: $data, click: $parent.goto, text:'Load '+$data"></option>
</select>

选项似乎正确显示，但单击它们却什么也没有发生。 我究竟做错了什么？

Answer 1

您需要使用选项绑定并将函数传递给optionsText：

<div>
    <select data-bind="{ value: selectedPanel, event: { change: goto}, options: panels,optionsText: function(panel) { return 'Load ' + panel}"></select>
</div>

如果我理解正确，当用户单击（选择）选项时，您要执行功能。 有了事件：{change：goto}绑定，您要告诉敲除程序，每次在select上触发“ change”事件时就调用“ goto”功能。

视图模型：

function PageViewModel() {
    var self = this;
    self.panels = ko.observableArray(["panel1", "panel2", "panel3"]);
    self.selectedPanel = ko.observable();
    self.goto = function () {
        var selectedValue = self.selectedPanel();
        //do whatever you want 
        console.debug(selectedValue);
    }
}