Knockout js 星级评定“值未清除”

Question

我正在使用 Knockout js 进行星形绑定。它仅在页面加载时第一次工作。当我第一次从 5 个开始中选择一些 2 星时，它给了我正确的值，之后该值不会被清除我无法选择任何星星。需要一些帮助。

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

值按我的预期更新。我注释掉了 localStorage，因为这在 sn-p 中是被禁止的。

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>