在KnockoutJS中为jQuery插件创建自定义绑定

Question

I'm trying to create a custom binding in KnockoutJS using the raty jQuery plugin to do star ratings for movies. The normal implementation for the raty plugin would look like this...

$('.raty').raty();
<div class="raty" data-rating="3"></div>

and that would give you something like this...

<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>

I have an observableArray of movies, with each movie in the collection having UserMovies.Rating . I'm struggling to come up with a way to have the bindingHandler handle when users update the star rating and then updating the UserMovies.Rating value in the movies observableArray .

This is my attempt at the implementation and bindingHandler...

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

Answer 1

This code work perfectly for me:

ko.bindingHandlers.raty = {
   init: function (element, valueAccessor, allBindingsAccessor) {
      var options = allBindingsAccessor().ratyOptions || {};
      var value = ko.utils.unwrapObservable(valueAccessor());

      $(element).raty(options);
      $(element).raty("score", value);

      ko.utils.registerEventHandler(element, "click", function () {
          var observable = valueAccessor();
          observable($(element).raty("score"));
      });
    }
};

Answer 2

Not sure what you are aiming to do with this line, but can you replace this line:

ko.bindingHandlers.attr.update(element, { 'data-rating': value }); 

With just:

$(element).data("rating",value);

For updates, does raty expose an event for ratings changes? If so, you can bind that in your init . Else you could try binding the click event instead.

Answer 3

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
        $(element).data("rating",value);
        $(element).raty(options);

        $(element).delegate('click', 'img', function() {
            valueAccessor($(element).raty('score'));
        });
    }
};