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