Why is knockout.js textInput binding not working?

Question

Example taken from the documentation and stuck to a fiddle doesn't work. Code snippet for completeness:

<p>Login name: <input data-bind="textInput: userName" /></p>
<p>Password: <input type="password" data-bind="textInput: userPassword" /></p>

ViewModel:
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

<script>
    ko.applyBindings({
        userName: ko.observable(""),        // Initially blank
        userPassword: ko.observable("abc")  // Prepopulate
    });
</script>

I've tried it in an incognito window thinking that some browser extension might be messing with it. No luck.

Expected behavior is that viewModels's JSON dump should be updated with each keystroke in any of the input fields change.

If I switch to value binding instead of textInput it does update whenever input focus changes.

Has anyone encountered this?

score 27 · Accepted Answer · edited Oct 17 '17 at 08:26

27

The textInput binding was added in a later version of Knockout.JS (3.2.0).
Add the updated library to your fiddle and it works.

edited Oct 17 '17 at 08:26

Hakan Fıstık

16,800
14
110
131

answered Aug 27 '14 at 00:54

Ezra Bailey

1,434
13
25

You're right! It came from here https://github.com/knockout/knockout/pull/1160 I should have checked for that. Thanks! – uKolka Aug 27 '14 at 00:59
2

I ran into the same problem and unfortunately, jsfiddle did not list anything newer as KO 3.0. Added 3.2 manually as external source and worked like a charm! The KO docs should really mention the minimum version though, like jQuery does. – CodeManX Feb 02 '15 at 09:02
Agreed @CoDEmanX, it seems like they prefer people on latest currently which sometimes is just not possible. – Ezra Bailey Feb 03 '15 at 13:41
Same here. New projects created as "ASP.NET MVC 4 Web Application" contain Knockout 2.2.0 - and textInput binding doesn´t work. – huha Aug 24 '15 at 13:55
@huha The builtin projects for Visual Studio tend to have older references. You're well off to remove them and get latest from Nuget Package Manager whenever starting a new project from a template! – Ezra Bailey Aug 24 '15 at 14:11
1

For reference - I was using Durandal v2.1.0 and it came with Knockout 3.1.0. Which is why I'm here... – Neil Barnwell Oct 01 '15 at 08:54

score 8 · Answer 2 · edited May 23 '17 at 12:17

8

If you are stuck on an older version of Knockout you can use valueUpdate

<input data-bind="value: firstName, valueUpdate:'afterkeydown'" />

https://stackoverflow.com/a/4391419/1058292

edited May 23 '17 at 12:17

Community

1
1

answered Oct 07 '15 at 11:26

atreeon

21,799
13
85
104

Why is knockout.js textInput binding not working?

2 Answers2