Knockout.js Custom Binding "Update Function is Not called "

Question

I have below custom binding,Its star rating, On page load for me init and update is called but after that, Only init function is called not the update function. I need update function in which have class "Chosen" toggleclass,which add class to star binding after selected. I am facing problem in that kindly suggest.

    <div data-role=view id="view1">
    <div id="divstarRating" data-bind="click:selectStar">
    <span id="Star" data-bind="readonlyStarRating:starpoints"> </span>
    </div>
    </div>
.starRating span {
  width: 24px;
  height: 24px;
  background-image: url(../star.png);
  display: inline-block;
  cursor: pointer;
  background-position: -24px 0;
 }

 .starRating span.chosen {
  background-position: 0 0;
 } 

 .starRating:hover span {
 background-position: -24px 0;  
transform: rotate(-15deg) scale(1.3);
}

.starRating:hover span.hoverChosen {
 background-position: 0 0;
 transform: rotate(-15deg) scale(1.3);
  }

   function StarViewModel() {
    self.starpoints= ko.observable();

    self.selectStar=function(){
    window.location.href="view1"
     //here i get selected star value
      starValue=self.starpoints()

      //here i am using ajax to post star value
           $.ajax({
                type: "POST",
                dataType: "json",
                data: Model,
                url: serverUrl + 'xxx/xx/xx',
                success: function (data) {
                    $('#loading-image').hide();
                  // after susccees of post success ajax data consist of star rating value
                   self.starpoints= ko.observable(data);
                },
      }
   }

    $(document).ready(function () {
     ko.bindingHandlers.readonlyStarRating =
 {
 init: function (element, valueAccessor) {
 $(element).addClass("readonlyStarRating");
for (var i = 0; i < 5; i++)
 $("<span>").appendTo(element);
         $("span", element).each(function (index) {
         var observable = valueAccessor();
         $(this).hover(
             function () { 
 $(this).prevAll().add(this).addClass("hoverChosen") },
             function () { 
 $(this).prevAll().add(this).removeClass("hoverChosen") }
         )
      });
  },
  update: function (element, valueAccessor) {
     var observable = valueAccessor();
     $("span", element).each(function (index) {
     $(this).toggleClass("chosen", index < observable());
     });
    }
  }
    ViewModel = new StarViewModel();
    ko.applyBindings(ViewModel);
  });

Answer 1

From your jsFiddle, in your okay() function:

self.okay = function ()
{
    data = self.UserFeedpoint
    self.UserFeedpoints = ko.observable(data);
    window.location.href = "#home1"
}

You're overwriting the observable that the UI is bound to with a new observable. You just need to change it to update the existing observable instead. like:

self.okay = function ()
{
    data = self.UserFeedpoint
    self.UserFeedpoints(data);
    window.location.href = "#home1"
}