[英]Creating custom binding for jQuery plugin in KnockoutJS
我正在尝试使用棘手的 jQuery插件在KnockoutJS中创建自定义绑定,以对电影进行星级评分。 ratt插件的常规实现如下所示:
$('.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'));
}
};
这段代码非常适合我:
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"));
});
}
};
不确定您打算如何使用此行,但是可以替换此行:
ko.bindingHandlers.attr.update(element, { 'data-rating': value });
只是:
$(element).data("rating",value);
对于更新, raty
公开评级变化事件吗? 如果是这样,您可以将其绑定到init
。 否则,您可以尝试绑定click
事件。
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'));
});
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.