Изменение события ввода-вывода knockout.js - передает старое значение

При добавлении привязки события изменения к ящику ввода с помощью knockout.js старое значение передается функции изменения при запуске события. Я могу обойти это, используя размытие. Это предполагаемое поведение? Является ли идея использовать событие изменения для старого значения, а затем использовать обычный селектор для получения значения из dom? Это кажется противостоящим интуитивным.

Пример jsFiddle

JavaScript
----------
var data = {
    saved_value:"1",
    value_changed: function(data){
        alert(data.saved_value());
    }
};
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

HTML
----
Current Value:<span data-bind="text:saved_value"></span><br/>
<input data-bind="event:{change:value_changed},value:saved_value"></input>

Ответ 1

Попробуйте использовать привязки текста и значения:

Current Value:<span data-bind="text: saved_value"></span><br/>
<input data-bind="value: saved_value"></input>

И измените JavaScript на это:

var data = {
    saved_value: "1"    
};

var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

Здесь связан jsFiddle: http://jsfiddle.net/6zmJs/

Если вы хотите alert() значение saved_value, когда оно обновлено, вы можете использовать ko.computed или viewModel.saved_value.subscribe(function(value) { alert(value); }); - хотя это не единственные способы сделать это.

Ответ 2

Нет, это неправильный способ сделать что-то.

Вы получаете старое значение, потому что saved_value не обновляется до тех пор, пока текстовое поле не потеряет фокус.

Если вы хотите нажимать новое значение в виде пользовательских типов, используя параметр valueUpdate для привязки ввода:

<input data-bind="event: { change: value_changed }, value: saved_value, valueUpdate: 'afterkeydown'" />

Параметр valueUpdate принимает имя события (например, "keyup" ). Когда это событие срабатывает, ваше сохраненное значение будет обновлено.

Теперь позвольте мне предложить альтернативное решение.

По-прежнему выполняйте привязку valueUpdate, как показано выше, но вместо прослушивания измененного события просто подпишитесь на наблюдаемое:

<input data-bind="textInput: saved_value" />

Тогда в JS:

var viewModel = {
    saved_value: ko.observable("1"),
};
viewModel.saved_value.subscribe(function (newValue) {
   alert(data.saved_value());
});
ko.applyBindings(viewModel);

Ответ 3

Если вы добавите опцию "event" в конце, вам не понадобится опция "valueUpdate". Вот так:

<input data-bind="value: saved_value, event: { change: value_changed }" />

Также обратите внимание, что когда вы используете подписку на наблюдаемую, она запускается каждый раз, когда изменяется ваше значение. (либо путем взаимодействия с пользователем, либо программно).

Ответ 4

Попробуйте это в обработчиках событий записи привязки данных после обработчиков значений, а не раньше:

<input data-bind="value: property, event:{ change: doSomething}" />