set knockout.js value programatically from "outside"

user_2446374 0
Viewed 53

I am brand new to knockout.js - I have taken over an existing app written in it, the previous maintainers having left - and I want to start by writing tests that exercise the whole thing from outside it. Most pages are quite straightforward, but I've encountered this:

<textarea maxlength="4000" 
   data-bind="valueWithPlaceholder: answerValue, 
    placeholder: exampleText, 
    maxLengthCountdown: answerValue"></textarea>

this is inside a with, inside loops inside another with etc - and I have no real interest in figuring out the whole schema at this point - I just want to set it to something with javascript..

  • I've tried element.value = "blah" - it sets the value visibly, but doesn't seem to affect the binding in any way - going "next" still says I have to enter something
  • I've tried doing element.focus(), a whole bunch of element.dispatchEvent( new KeyboardEvent(...) with keydown, keypress and key up, and then element.blur() and nothing at all happens

any ideas how I set it? I want some way that is not tied to understanding the schema - because I have a bunch of these to set, and want to build some function along the lines of "set_text_area( element, value )". I'm really looking for something like:

element.value = "blah"
knockout.force_update_binding( element );   // I'm imagining this exists

Note: What I'm asking is how to set a value programmatically from an element and without knowing anything about the underlying model. Obviously if I know the model, then I just set it - but I'm just clicking on an element in my test harness and wanting to type a value in - and my test harness can't go and "understand" stuff.

knockout.js html javascript
1 Answers

This is a bit of an anti pattern, but I get the impression from your question that you just want to get the job done...

If you know the name of the observable property

If you know what property to set, you can use ko.dataFor to get the viewmodel that belongs to the node.

ko.applyBindings({
  myValue: ko.observable("Initial value")
});


ko.dataFor(document.querySelector("input")) // Get the viewmodel
  .myValue("New value");  // Set a new value
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<input data-bind="value: myValue">

If you only know the binding type

You can also ask knockout for all bindings applied to a node:

ko.applyBindings({
  myValue: ko.observable("Initial value")
});

// Get your node
const myNode = document.querySelector("input");

// Get the bindings
const bindings = ko
  .bindingProvider
  .instance
  .getBindings(
     myNode,
     ko.contextFor(myNode)
   )
 
// Get the observable that is used in the 'value' binding
const boundValue = bindings.value;

// Set a new value
boundValue("New value");
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<input data-bind="value: myValue">

Note: the bindings you've shown in your template are not default knockout bindings. So if the above examples do not work, you might have to share their implementations with us for us to be able to help.

user_32972910
Related