Javascript KnockoutJS：单击Select中每个选项上调用的事件

我希望Knockout在用户单击SELECT元素中的选项时调用事件

以下是我的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());

这是我的HTML：

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

但是当我运行这个程序时，应用程序显示“hello”三次，即使没有实际单击任何选项

---

我做错了什么？

您应该使用

change

绑定而不是

单击
和
选项text
绑定而不是
选项
标记并在
change
绑定中使用
函数
，而不是仅仅调用
警报
：

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


功能餐（名称、价格）{
var self=这个；
self.mealName=名称；
self.price=价格；
}
函数ReservationsViewModel（）{
var self=这个；
self.availableMeals=ko.observableArlay(
[新餐（标准（三明治）”，0，
新餐（“优质（龙虾）”，34.95），
新餐（“终极（全斑马）”，290）；
self.selectedMeal=ko.observable（self.availableMeals（）[0]）；
self.onChange=函数（）{
警惕（“你好”）；
};
}
应用绑定（新的ReservationsViewModel（））；

下面是一个工作示例：
应将“警报”嵌入函数中：

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


工作得非常完美，而且是一种更为复杂的模式。谢谢是的，这太完美了！很好的KO模式示例