Home/ Questions/Q 8744315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:49:21+00:00

How can i change value of observable inside of subscribe function? For example JS

  • 0

How can i change value of observable inside of subscribe function?
For example

JS Model:

function Model(){
    self = this;
    self.Test = ko.observable(2);
    self.Test.subscribe(function (){
      if (/**Some bool expression**/) {
         self.Test(2);
      }
    });
}

HTML:

<input type="radio" value="1" data-bind="checked:Test" />
<input type="radio" value="2" data-bind="checked:Test" />
<input type="radio" value="3" data-bind="checked:Test" />

By default second radio input is checked. After I clicked on first radio, both first and second is selected.

enter image description here

UPDATED:
It is happens when I include both jQuery and knockout. If remove jquery then all is Ok.
But it is just test page. In real project I need to use jQuery in some places, and in this case I can not remove it.

Sample.
Source of test page:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="knockout-2.1.0.js"></script>
        <script type="text/javascript" src="jquery-1.6.4.js"></script>
        <script type="text/javascript">
            function Model(){
                self = this;
                self.Test = ko.observable(2);
                self.Test.subscribe(function (){
                  if (true) {
                     self.Test(2);
                  }
                });
            }
        </script>
    </head>
<body>
    <input type="radio" value="1" data-bind="checked:Test" />
    <input type="radio" value="2" data-bind="checked:Test" />
    <input type="radio" value="3" data-bind="checked:Test" />
</body>
<script type='text/javascript'>
    ko.applyBindings(new Model());
</script>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    UPDATE (2015-02-27): As of Knockout 3.1.0, Knockout doesn’t include any “workaround” code for the click event and should have no problem handling the example in the question. http://jsfiddle.net/9S96U/3/

    When jQuery is included, Knockout uses it to handle events, including the click event used to respond to radio buttons. It includes some “workaround” code to make sure the click handler sees the correct checked state of the radio button, but this seems to interfere with your code that tries to reset the checked value in the middle.

    A solution is to update the value using setTimeout. That way it happens after the click handler has finished.

    function Model(){
    var self = this;
    self.Test = ko.observable(2);
    self.Test.subscribe(function (){
        setTimeout(function() {
            self.Test(2);
        });
    });
}

    Example: http://jsfiddle.net/9S96U/1/

    Also you need to include var before self = this so that you’re not overwriting window.self.

    • 0