knockout.js - What is the easiest way to change data in one of the Knockout viewmodels while running in the browser?

Question

I am running (my own built) KnockOut.JS application. What is the easiest way to CHANGE data in one of the viewmodels?

I do not have a global JS object I can change in the console, and I have multiple elements with their own binding. I can of course create a button and a method on the viewmodel, but I want to play around with some values on the viewmodel to see the effect in the UI.

Preferably in Chrome.

Answer 1

Normally you would apply the bindings in a manner similar to this:

 ko.applyBindings(new Model());

But then the reference to the model is not available to you later on. Instead, if you keep a copy of the reference variable generated by new Model() you can change the observables within it, or check their values for debugging. Here's the pattern I employ when I need my model accessible to external code.

var vm = new Model();
ko.applyBindings(vm);

Now, if you wanted you could check the values in vm or update the observables if you wish. See the example below.

var Model= function() {
  var self = this;
  
  self.test = ko.observable("Initial Value");
}

var vm = new Model();
ko.applyBindings(vm);

setInterval(function() {
  vm.test("Value updated from external code!");
  
  setTimeout(function() {
    vm.test("New Value from external code!");
  }, 1000)
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="text" data-bind="textInput: test" />
<br/>
<span data-bind="text: test"></span>