When adding a change event binding to an input box using knockout.js the old value is passed to the change function when the event is fired. I can work around this by using blur. Is this the intended behavior? Is the idea to use the change event to have the old value and then use a normal selector to get the value from the dom? It seems counter intuitive.
使用knockout.js将更改事件绑定添加到输入框时,会在触发事件时将旧值传递给change函数。我可以通过使用模糊来解决这个问题。这是预期的行为吗?是否使用change事件来获取旧值,然后使用普通选择器从dom获取值?这似乎反直觉。
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>
4 个解决方案
#1
6
Try using the text and value bindings:
尝试使用文本和值绑定:
Current Value:<span data-bind="text: saved_value"></span><br/>
<input data-bind="value: saved_value"></input>
And change the JavaScript to this:
并将JavaScript更改为:
var data = {
saved_value: "1"
};
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
Here's an associated jsFiddle: http://jsfiddle.net/6zmJs/
这是一个相关的jsFiddle:http://jsfiddle.net/6zmJs/
If you want to alert()
the value of saved_value
when it is updated you could use ko.computed
or viewModel.saved_value.subscribe(function(value) { alert(value); });
-- although those aren't the only ways to do this.
如果你想更新saved_value的值,你可以使用ko.computed或viewModel.saved_value.subscribe(function(value){alert(value);}); - 虽然这些不是唯一的方法。
#2
71
Update: For newer versions of knockout, you can replace the value binding with textInput, which handles many edge cases not covered by valueUpdate
.
更新:对于较新版本的knockout,您可以使用textInput替换值绑定,textInput处理valueUpdate未涵盖的许多边缘情况。
No, this is not the right way to do things.
不,这不是正确的做事方式。
You're getting the old value because saved_value doesn't get updated until the textbox loses focus.
您将获得旧值,因为saved_value在文本框失去焦点之前不会更新。
If you want to push the new value in as the user types, using the valueUpdate option of the input binding:
如果要在用户键入时使用输入绑定的valueUpdate选项推送新值:
<input data-bind="event: { change: value_changed }, value: saved_value, valueUpdate: 'afterkeydown'" />
The valueUpdate option takes an event name (e.g. 'keyup'). When that event fires, your saved_value will be updated.
valueUpdate选项采用事件名称(例如'keyup')。当该事件触发时,您的saved_value将被更新。
Now let me propose an alternate solution.
现在让我提出一个替代解决方案。
Still do the valueUpdate binding like I showed above, but instead of listening for the changed event, just subscribe to the observable:
仍然像我上面所示的那样执行valueUpdate绑定,但是不是监听已更改的事件,只需订阅observable:
<input data-bind="textInput: saved_value" />
Then in JS:
然后在JS中:
var viewModel = {
saved_value: ko.observable("1"),
};
viewModel.saved_value.subscribe(function (newValue) {
alert(data.saved_value());
});
ko.applyBindings(viewModel);
#3
9
If you put the 'event' option at the end you don't need the 'valueUpdate' option. Like this:
如果您将'event'选项放在最后,则不需要'valueUpdate'选项。喜欢这个:
<input data-bind="value: saved_value, event: { change: value_changed }" />
Also note that when you make use of subscribe to an observable, it gets triggered every time your value changes. (either by user interaction or programmatically).
另请注意,当您使用订阅可观察对象时,每次您的值更改时都会触发它。 (通过用户交互或以编程方式)。
#4
4
Try this in the data bind write event handlers, after the value handlers and not before:
在数据绑定写事件处理程序中尝试此操作,在值处理程序之后而不是之前:
<input data-bind="value: property, event:{ change: doSomething}" />
#1
6
Try using the text and value bindings:
尝试使用文本和值绑定:
Current Value:<span data-bind="text: saved_value"></span><br/>
<input data-bind="value: saved_value"></input>
And change the JavaScript to this:
并将JavaScript更改为:
var data = {
saved_value: "1"
};
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
Here's an associated jsFiddle: http://jsfiddle.net/6zmJs/
这是一个相关的jsFiddle:http://jsfiddle.net/6zmJs/
If you want to alert()
the value of saved_value
when it is updated you could use ko.computed
or viewModel.saved_value.subscribe(function(value) { alert(value); });
-- although those aren't the only ways to do this.
如果你想更新saved_value的值,你可以使用ko.computed或viewModel.saved_value.subscribe(function(value){alert(value);}); - 虽然这些不是唯一的方法。
#2
71
Update: For newer versions of knockout, you can replace the value binding with textInput, which handles many edge cases not covered by valueUpdate
.
更新:对于较新版本的knockout,您可以使用textInput替换值绑定,textInput处理valueUpdate未涵盖的许多边缘情况。
No, this is not the right way to do things.
不,这不是正确的做事方式。
You're getting the old value because saved_value doesn't get updated until the textbox loses focus.
您将获得旧值,因为saved_value在文本框失去焦点之前不会更新。
If you want to push the new value in as the user types, using the valueUpdate option of the input binding:
如果要在用户键入时使用输入绑定的valueUpdate选项推送新值:
<input data-bind="event: { change: value_changed }, value: saved_value, valueUpdate: 'afterkeydown'" />
The valueUpdate option takes an event name (e.g. 'keyup'). When that event fires, your saved_value will be updated.
valueUpdate选项采用事件名称(例如'keyup')。当该事件触发时,您的saved_value将被更新。
Now let me propose an alternate solution.
现在让我提出一个替代解决方案。
Still do the valueUpdate binding like I showed above, but instead of listening for the changed event, just subscribe to the observable:
仍然像我上面所示的那样执行valueUpdate绑定,但是不是监听已更改的事件,只需订阅observable:
<input data-bind="textInput: saved_value" />
Then in JS:
然后在JS中:
var viewModel = {
saved_value: ko.observable("1"),
};
viewModel.saved_value.subscribe(function (newValue) {
alert(data.saved_value());
});
ko.applyBindings(viewModel);
#3
9
If you put the 'event' option at the end you don't need the 'valueUpdate' option. Like this:
如果您将'event'选项放在最后,则不需要'valueUpdate'选项。喜欢这个:
<input data-bind="value: saved_value, event: { change: value_changed }" />
Also note that when you make use of subscribe to an observable, it gets triggered every time your value changes. (either by user interaction or programmatically).
另请注意,当您使用订阅可观察对象时,每次您的值更改时都会触发它。 (通过用户交互或以编程方式)。
#4
4
Try this in the data bind write event handlers, after the value handlers and not before:
在数据绑定写事件处理程序中尝试此操作,在值处理程序之后而不是之前:
<input data-bind="value: property, event:{ change: doSomething}" />