星級評分綁定使用淘汰賽js

我想綁定星級評分使用淘汰賽js和ajax，星級評級是綁定，如果我手動賦值的數據=數據= 3或數據= 4，但我得到的數據從ajax它沒有得到綁定，但我從ajax結果獲得的價值，並將其傳遞給viewmodel它不能在下面工作是我的代碼需要幫助。星級評分綁定使用淘汰賽js

//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; }

來源

2016-09-16 kitty sarvaj

它看起來像你需要先啓動了解[jQuery的Ajax的工作原理（http://api.jquery.com/jquery.ajax/）。 – janmvtrinidad

您實際上有兩個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); 
    } 
...

來源

2016-09-16 08:34:54 janmvtrinidad

@感謝您的時間，它解決了我的問題 –

星級評分綁定使用淘汰賽js

回答

相關問題