KnockoutJS: nhấp vào sự kiện được gọi trên mọi Tùy chọn trong Chọn

Question

Tôi muốn Knockout gọi một sự kiện bất cứ khi nào người dùng nhấp vào một tùy chọn trong phần tử SELECT.

Dưới đây là JavaScript của tôi:

function ReservationsViewModel() { 
    this.availableMeals = [ 
     { mealName: "Standard (sandwich)", price: 0 }, 
     { mealName: "Premium (lobster)", price: 34.95 }, 
     { mealName: "Ultimate (whole zebra)", price: 290 } 
    ]; 
} 

ko.applyBindings(new ReservationsViewModel()); 

Dưới đây là HTML của tôi:

<select data-bind="foreach: availableMeals"> 
    <option data-bind="text: mealName, click: alert('hello')" /> 
</select> 

Nhưng khi tôi chạy này, ứng dụng cho thấy "hello" ba lần mặc dù không ai trong số các tùy chọn đã thực sự nhấp vào.

Tôi đang làm gì sai?

Answer 1

Bạn nên sử dụng change ràng buộc thay vì click và optionsText ràng buộc thay vì option thẻ và sử dụng function trong change ràng buộc thay vì chỉ gọi alert: ví dụ

<select data-bind="options: availableMeals, optionsText: 'mealName', value: selectedMeal, event: {change: onChange}"> 
</select> 

function Meal(name, price){ 
    var self = this; 

    self.mealName = name; 
    self.price = price;  
} 

function ReservationsViewModel() { 
    var self = this; 
    self.availableMeals = ko.observableArray(
     [new Meal("Standard (sandwich)", 0), 
     new Meal("Premium (lobster)", 34.95), 
     new Meal("Ultimate (whole zebra)", 290)]); 


    self.selectedMeal = ko.observable(self.availableMeals()[0]); 

    self.onChange = function() { 
     alert("Hello"); 
    }; 
} 

ko.applyBindings(new ReservationsViewModel()); 

đây đang làm việc: http://jsfiddle.net/Q8QLX/

Answer 2

Các " cảnh báo "phải được nhúng trong một hàm:

<select data-bind="foreach: availableMeals, event: {change: function() { alert('hello'); } }"> 
    <option data-bind="text: mealName " /> 
</select>