Knockout.jsカスタムバインド "更新機能が呼び出されていません"

Question

私は以下のカスタムバインディングを持っています。その星の評価、私のページの読み込みはinitと呼ばれますが、その後はinit関数のみが呼び出されます。選択した後にスターバインディングにクラスを追加するクラス "Chosen" toggleclassを持つ更新機能が必要です。私はそれが親切に示唆して問題に直面している。あなたのjsFiddleから

<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

、あなたのokay()機能に：

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

あなたはUIが新しい観測可能でバインドされている、観察を上書きしています。代わりに、それを変更して、代わりに既存のオブザーバブルを更新する必要があります。 like：

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