KnockoutJS: Klick Ereignis aufgerufen für jede Option in Wählen Sie

Question

Ich möchte Knockout ein Ereignis aufrufen, wenn der Benutzer auf eine Option in einem SELECT-Element klickt.

Hier ist mein 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()); 

Hier ist mein HTML:

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

Aber wenn ich dies ausführen, wird die Anwendung zeigt „hallo“ dreimal, obwohl keine der Optionen tatsächlich angeklickt wurden.

Was mache ich falsch?

Answer 1

sollten Sie change anstelle von click und optionsText Bindung statt option Tagbindenden und function in change verwenden, anstatt nur verbindlich alert Aufruf:

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

Hier arbeitet Beispiel: http://jsfiddle.net/Q8QLX/

Answer 2

Der " Alarm "sollte in eine Funktion eingebettet sein:

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