在KnockoutJS中为jQuery插件创建自定义绑定
提问于 2012-12-08 17:04:35
我正在尝试使用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。当用户更新星级，然后更新电影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'));
}
};
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-12-08 17:21:07
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'));
});
}
};Stack Overflow用户
发布于 2013-02-08 04:40:37
这段代码非常适合我：
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"));
});
}
};Stack Overflow用户
发布于 2012-12-08 17:19:27
不确定您打算如何处理这一行，但您可以替换这一行吗：
ko.bindingHandlers.attr.update(element, { 'data-rating': value }); 只需：
$(element).data("rating",value);对于更新，raty是否公开评级更改事件？如果是这样，您可以将其绑定到您的init中。否则，您可以尝试绑定click事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13779700
复制相关文章
腾讯云开发者
