13

ユーザーがSELECT要素のオプションをクリックするたびにKnockoutがイベントを呼び出すようにしたい。

これが私の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」が3回表示されます。

私は何が間違っているのですか？

4

2 に答える 2

16

changeタグの代わりclickにバインディングを使用し、タグoptionsTextの代わりにバインディングを使用し、単に呼び出す代わりにバインディングで使用する必要があります。optionfunctionchangealert

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

実例は次のとおりです：http：//jsfiddle.net/Q8QLX/

于 2012-10-15T10:08:46.140 に答える
3

「アラート」は関数に埋め込まれている必要があります。

<select data-bind="foreach: availableMeals, event: {change: function () {   alert('hello'); } }">
    <option data-bind="text: mealName " />
</select>
于 2012-10-15T10:55:01.927 に答える