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}绑定，你告诉淘汰赛要打电话给＆＃39; goto＆＃39;每次改变＆＃39;在select上触发事件。

viewmodel：

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);
    }
}

Foreach并单击数据绑定列表和下拉列表中的淘汰差异

1 个答案: