Knockout js Sterne Bewertung "Wert nicht gelöscht werden"

Question

Ich benutze Knockout js für Sterne verbindlich.Sie arbeiten nur zum ersten Mal, wenn die Seite geladen wird. Wenn ich einige 2 Sterne von 5 Start zum ersten Mal wählen, gibt es mir Wert richtig, danach ist der Wert nicht gelöscht und ich kann keinen der Sterne auswählen. Brauche etwas Hilfe darin.

ko.bindingHandlers.starRating = { 
init: function (element, valueAccessor) { 
    console.log(valueAccessor); 
    $(element).addClass("starRating"); 
    for (var i = 0; i < 5; i++) 
     $("<span>").appendTo(element); 
     $("span", element).each(function (index) { 
      $(this).hover(
       function() { $(this).prevAll().add(this).addClass("hoverChosen") }, 
       function() { $(this).prevAll().add(this).removeClass("hoverChosen") } 
      ).click(function() { 
       var observable = valueAccessor(); 
       console.log(observable) 
       observable(index + 1); 
       window.localStorage.setItem("star", observable()); 
      }); 
     }); 
     }, 
     update: function (element, valueAccessor) { 
     var observable = valueAccessor(); 
     $("span", element).each(function (index) { 
      $(this).toggleClass("chosen", index < observable()); 
     }); 
     } 
    }; 

    //HTML 
    <div id="divstarRating"> 
    <span id="feedStar" data-bind="starRating: UserFeedpoints"> </span> 
      </div> 


//css 

.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); 
    } 

Answer 1

Der Wert aktualisiert wie erwartet für mich. Ich habe die localStorage auskommentiert, weil das in einem Snippet verboten ist.

ko.bindingHandlers.starRating = { 
 
    init: function(element, valueAccessor) { 
 
    console.log(valueAccessor); 
 
    $(element).addClass("starRating"); 
 
    for (var i = 0; i < 5; i++) 
 
     $("<span>").appendTo(element); 
 
    $("span", element).each(function(index) { 
 
     $(this).hover(
 
     function() { 
 
      $(this).prevAll().add(this).addClass("hoverChosen") 
 
     }, 
 
     function() { 
 
      $(this).prevAll().add(this).removeClass("hoverChosen") 
 
     } 
 
    ).click(function() { 
 
     var observable = valueAccessor(); 
 
     console.log(observable) 
 
     observable(index + 1); 
 
     //window.localStorage.setItem("star", observable()); 
 
     }); 
 
    }); 
 
    }, 
 
    update: function(element, valueAccessor) { 
 
    var observable = valueAccessor(); 
 
    $("span", element).each(function(index) { 
 
     $(this).toggleClass("chosen", index < observable()); 
 
    }); 
 
    } 
 
}; 
 

 
ko.applyBindings({ 
 
    UserFeedpoints: ko.observable() 
 
});

.starRating span { 
 
    width: 24px; 
 
    height: 24px; 
 
    background-color: red; 
 
    background-image: url(https://upload.wikimedia.org/wikipedia/en/e/e5/Yellow_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); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div id="divstarRating"> 
 
    <span id="feedStar" data-bind="starRating: UserFeedpoints"> </span> 
 
    <div data-bind="text: UserFeedpoints"></div> 
 
</div>