使用knockout js进行星级评分绑定

Question

我正在尝试使用 knockout js 和 ajax 绑定星级，如果我手动分配值如数据 = 3 或数据 = 4，则星级是绑定的，但是我得到的数据从 ajax 它没有得到绑定，但我从 ajax 结果中获取值并将其传递给 viewmodel 它在下面不起作用是我的代码需要帮助。

 //HTML//

 <div id="divstarRating">
 <span data-bind="readonlyStarRating:starpoints"></span></a>
 </div>

     ///Custom Binding
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

 function starRating(data) {
if (data != 0) {
    this.starpoints = ko.observable(data);
}
else {
    this.starpoints = ko.observable(1);
}
 }
 ko.applyBindings(new starRating(), document.getElementById('divstarRating'))

 //ajax///

$.ajax({
    type: "POST",
    dataType: "json",
    data: xxxx,
    url: xxxx+ 'api/xx/xxxxxx',
    success: function (data) {
      //I am getting the value and passing to viewModel
        return new starRating(data); 
    }
});

   //CSS//
.readonlyStarRating span { width:24px; height:24px; background-image:      url(../star.png); display:inline-block; cursor: pointer; background-position: -24px 0; }
.readonlyStarRating span.chosen { background-position: 0 0; }

Answer 1

您实际上有两个 starRating 实例。为了反映您的 html 中的值，您应该在传递给 ko.applyBindings 之前存储 new startRating 的实例。然后在您的 ajax 请求中使用该实例，而不是 return new startRating(data).

或者您可以使用 ko.dataFor 获取 viewModel 的实例。

看起来像这样

...
   //in your ajax request    
   success: function (data) {
       var vm = ko.dataFor(document.getElementById('divstarRating'));
       vm.starpoints(data);
   }
...

使用knockout js进行星级评分绑定

Star rating binding using knockout js

javascript

knockout-mapping-plugin

knockout.js

knockout-validation