私は、映画の星評価を行うために、raty jQueryプラグインを使用して、KnockoutJSでカスタムバインディングを作成しようとしています。ratyプラグインの通常の実装は次のようになります...
$('.raty').raty();
<div class="raty" data-rating="3"></div>
そしてそれはあなたにこのようなものを与えるでしょう...
<div class="raty" data-rating="3" style="cursor: pointer; width: 100px;">
<img src="/raty/img/star-on.png" alt="1" title="bad">
<img src="/raty/img/star-on.png" alt="2" title="poor">
<img src="/raty/img/star-on.png" alt="3" title="regular">
<img src="/raty/img/star-off.png" alt="4" title="good">
<img src="/raty/img/star-off.png" alt="5" title="gorgeous">
<input type="hidden" name="score" value="3">
</div>
私はobservableArray
映画を持っていますが、コレクション内の各映画にはがありUserMovies.Rating
ます。UserMovies.Rating
ユーザーが星の評価を更新してから映画の値を更新するときに、bindingHandlerを処理する方法を考え出すのに苦労していますobservableArray
。
これは、実装とバインディングハンドラーでの私の試みです...
<div class="raty" data-bind="raty: UserMovies[0].Rating, ratyOptions: { cancel: true, half: true, size: 24 }"></div>
ko.bindingHandlers.raty = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var options = allBindingsAccessor().ratyOptions || {};
var value = ko.utils.unwrapObservable(valueAccessor());
// the line below throws Syntax error: Invalid label
ko.bindingHandlers.attr.update(element, { 'data-rating': value });
$(element).raty(options);
// how to fire upate function when user changes star ratings?
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
valueAccessor($(element).raty('score'));
}
};