Флажок Knockoutjs изменил событие

У меня есть несколько флажков, привязанных к массиву в моей модели. Это прекрасно работает, когда вы устанавливаете флажок, массив обновляется соответствующим образом.

Однако, когда значение изменилось, я хочу вызвать метод моей модели для фильтрации результатов с учетом новых значений. Я попытался подключить событие изменения, но, похоже, оно имеет значения до изменения, а не после изменения.

Я проиллюстрировал свою проблему в jsfiddle http://jsfiddle.net/LpKSe/, что может сделать это более смысл.

Для полноты мой код повторяется здесь.

JS

function SizeModel() {
    var self = this;
    self.sizes = ko.observableArray(["small", "medium", "large"]);
    self.sizes2 = ko.observableArray(["small", "medium", "large"]);
    self.getResults = function(e) {
        alert(self.sizes());
    };
    self.getResults2 = function(e) {
        alert(self.sizes2());
    };
}

$(document).ready(function() {
    sizeModel = new SizeModel();

    ko.applyBindings(sizeModel);
});​

HTML

<h3>Size
  <input type="checkbox" value="small"  data-bind=" checked: sizes, event:{change: getResults}"/>
  <span class='headertext'>Small</span>
  <input type="checkbox"  value="medium" data-bind=" checked: sizes, event:{change: getResults}"   />
  <span class='headertext'>Medium</span>
  <input type="checkbox"  value="large" data-bind=" checked: sizes, event:{change: getResults}"  />
  <span class='headertext'>Large</span>
</h3>
<h3>Size
 <input type="checkbox" value="small"  data-bind=" checked: sizes2, event:{click: getResults2}"/>
 <span class='headertext'>Small</span>
 <input type="checkbox"  value="medium" data-bind=" checked: sizes2, event:{click: getResults2}"   />
 <span class='headertext'>Medium</span>
 <input type="checkbox"  value="large" data-bind=" checked: sizes2, event:{click: getResults2}"  />
 <span class='headertext'>Large</span>
</h3>

javascript mvvm knockout.js knockout-2.0
person Mingo    schedule 24.06.2012    source источник

Ответы (2)


arrow_upward
14
arrow_downward

Вам не нужно событие изменения. Если вы подпишетесь на observableArray, вы будете уведомлены, когда он изменится, и вам будет передан обновленный массив: http://jsfiddle.net/jearles/LpKSe/53/

function SizeModel() {
    var self = this;
    self.sizes = ko.observableArray(["3", "2", "1"]);
    self.sizes.subscribe(function(updated) {
        alert(updated);
    });
}
person John Earles    schedule 24.06.2012

arrow_upward
0
arrow_downward

В вашей скрипке вам не хватает запятых в ваших data-bind, вот фиксированный пример: http://jsfiddle.net/4aau4/1/

Что касается проблемы - это может быть либо проблема, связанная с KnockoutJS (т.е. она обновляет observableArray после запуска события change), либо что-то похожее на то, на чем я застрял некоторое время назад: Флажки проверяются еще до вызова обработчика кликов

ИЗМЕНИТЬ:

Какое тяжелое воскресенье, кажется, я еще не проснулась :)

Взгляните на этот фрагмент: http://jsfiddle.net/4aau4/2/ - это похоже, что DOM правильно обновляется, и ko.observableArray отстает. ($('input:checked').length говорит, сколько флажков на самом деле проверено).

person Tomasz Zieliński    schedule 24.06.2012