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

我试图在使用ratyjQuery插件的KnockoutJS中创建一个自定义绑定来为电影做星级评分。对于RATY插件的正常实施是这样的......在KnockoutJS中为jQuery插件创建自定义绑定

$('.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。当用户更新星级，然后更新电影observableArray中的UserMovies.Rating值时，我努力想出一种方法来让bindingHandler处理。

这是我在实施和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')); 
    } 
};

来源

2012-12-08 bflemi3

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-08 17:21:07

此处提供的解决方案是否正常工作？我把这个确切的代码，但不起作用。如何绑定点击，所以它称为淘汰赛功能？ – jmogera

不知道你的目标这一行做的，但你可以替换该行：

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

随着只是：

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

对于更新，请确认raty是否为评级公开活动变化？如果是这样，你可以绑定在你的init。否则，您可以尝试绑定click事件。

来源

2012-12-08 17:19:26

元素需要有属性'数据rating'为了RATY正确设置初始星级评价。设置$（element）.data（'rating'，value）'不会设置html5数据属性。 – bflemi3

@ bflemi3：你真的试过了吗？我敢打赌，Raty使用'.data（）'得到'data-rating'，在这种情况下，它绝对可行。 –

@ bflemi3：如果没有，您可以始终执行'$（“＃mydiv”）。attr（“data-rating”，value）' –

此代码工作完美的我：

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-08 04:40:36 jmogera

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

回答

相关问题