DOM how to get Knockout JS value

Question

Having zero experience with Knockout but knowing Javascript and Jquery, I am facing a problem.

<input type="text" 
       value="Original Value" 
       data-bind="value: description, 
                  valueUpdate: 'afterkeydown'" />

var viewModel = { 
    description:ko.observable("")    
    };    

ko.applyBindings(viewModel);

http://jsfiddle.net/243b1z4h/1/

The user types something in that input text box, but the property value still has the old/original value (using the browser inspector tool) and does not update it.

How am I able to force knockout to always update the input value?

Not sure what you're talking about. Your fiddle works perfectly: http://jsfiddle.net/243b1z4h/2/ (only change to v2 is the added viewmodel rendering) — Tomalak, Nov 30 '15 at 12:03
@Tomalak in Chrome for example, type something and after press right mouse click inside the input field and select "inspect element", the html still shows the property value with the original value... I need to update it. — Dryadwoods, Nov 30 '15 at 12:06
Just look at the fiddle link I gave. BTW, you might want to use the [`textInput` binding](http://knockoutjs.com/documentation/textinput-binding.html) (introduced in knockout 3.2.0) rater than `value`/`valueUpdate`. — Tomalak, Nov 30 '15 at 12:06
@Tomalak I appreciate your feedback, unfortunately I still don't have a solution for my problem. — Dryadwoods, Nov 30 '15 at 12:14
You don't have a problem, so you don't need a solution. it's completely irrelevant what the HTML shows when you inspect the element. It's unclear to me why you are even looking at that. Maybe you just explain what you are trying to achieve? — Tomalak, Nov 30 '15 at 12:18
@Tomalak My question is clear, HOW can I set the HTML property VALUE with the new value? It is always showing the old one. Please check my printscreen in case my words are not so clear. — Dryadwoods, Nov 30 '15 at 12:19
@Dryadwoods, You need to understand the difference between element property and attribute. Why is it important to you that the *attribute* value will reflect the changes? — haim770, Nov 30 '15 at 12:20
well apart from the reasons you can use `attr` in subscribe to update it . check here http://jsfiddle.net/243b1z4h/4/ . — super cool, Nov 30 '15 at 12:34
@Dryadwoods Yes, your question is clear. ;) You want a useless thing, most likely because you lack some understanding about how the DOM works generally and how knockout works specifically. All I do is trying to make that fact visible to you that your question is unreasonable. (You also still have not explained *what* you are actually trying to do.) — Tomalak, Nov 30 '15 at 12:36
BTW, I just found a good explanation for the behavior you observe: http://stackoverflow.com/a/16957328/18771 - It's not related to knockout at all, it's simply how the DOM works. — Tomalak, Nov 30 '15 at 15:27

score 3 · Accepted Answer · answered Nov 30 '15 at 12:30

This is only a "visual" question. The console doesn't realize that the element's value has changed, and keeps showing the original value attribute.

To prove it, you can do the following:

use Chrome's console pointer (on top left corner, or press Ctrl+Shift+C) and select the input element
on the console type $0.value. It will show you the value as updated by ko

In case you don't know what $0 is, it's the selected element. You can also use $0 for something interesting, like showing the ko bound viewmodel: ko.toJS(ko.dataFor($0))

By the way, for this to work, you must choose the appropriate frame in your console: int the first textbox of the console, choose the result(fiddle.jshell.net/) frame

DOM how to get Knockout JS value

1 Answers1