Knockout.js Reliure personnalisée "La fonction de mise à jour n'est pas appelée"

Question

J'ai ci-dessous la liaison personnalisée, son nombre d'étoiles, Sur la page de chargement pour moi init et la mise à jour est appelée mais après cela, seule la fonction init est appelée la fonction de mise à jour. J'ai besoin de la fonction de mise à jour dans laquelle j'ai la classe "Choisi" toggleclass, qui ajoute la classe à la liaison d'étoiles après sélectionnée. Je suis confronté à un problème dans cette suggestion aimable.

<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

De votre jsFiddle, dans votre fonction okay():

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

Vous écrasez l'observable que l'interface est liée à une nouvelle observable. Vous avez juste besoin de le changer pour mettre à jour l'observable existant à la place. comme:

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