KnockoutJS: kliknij wywoływane zdarzenie przy każdej opcji w Wybierz

Question

Chcę, aby funkcja Knockout wywoływał zdarzenie za każdym razem, gdy użytkownik kliknie opcję w elemencie SELECT.

Oto mój JavaScript:

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

Tu jest mój HTML:

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

Ale gdy uruchamiam to aplikacja pokazuje „cześć” trzy razy, chociaż żadna z opcji zostały faktycznie kliknięciu.

Co robię źle?

Answer 1

Należy użyć change wiążący zamiast click i optionsText wiązania zamiast option tag i używać function w change wiążący zamiast po prostu wywołanie alert: przykład

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

Oto robocza: http://jsfiddle.net/Q8QLX/

Answer 2

The " alert "powinien być osadzony w funkcji:

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