1

我正在尝试使用raty jQuery 插件在 KnockoutJS 中创建自定义绑定来为电影评分。比率插件的正常实现看起来像这样......

$('.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。

这是我对实现和 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'));
    }
};
4

3 回答 3

1

这段代码非常适合我：

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"));
      });
    }
};
于 2013-02-08T04:40:36.667 回答
0

不知道你打算用这条线做什么，但你可以替换这条线：

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

只需：

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

对于更新，是否会raty公开评级更改的事件？如果是这样，您可以将其绑定到您的init. 否则，您可以尝试绑定click事件。

于 2012-12-08T17:19:26.583 回答
0 
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'));
        });
    }
};
于 2012-12-08T17:21:07.267 回答