1

私は、映画の星評価を行うために、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'));
    }
};
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 に答える