RateIt knockout binding handler

Aug 1, 2013 at 11:15 AM
I thought I would share a custom binding handler I created to make using RateIt with knockout observables much easier.
ko.bindingHandlers.rateit = {
    init: function (element, valueAccessor) {
        var local = ko.toJS(valueAccessor()),
            options = {};

        if(typeof local === 'number') {
            local = {
                value: local
            };
        }

        ko.utils.extend(options, ko.bindingHandlers.rateit.options);
        ko.utils.extend(options, local);

        $(element).rateit(options);
        //register an event handler to update the viewmodel when the view is updated.
        $(element).bind('rated', function (event, value) {
            var floa = parseFloat(value.toFixed(1));
            var observable = valueAccessor();
            if(ko.isObservable(observable)) {
                observable(floa);
            } else {
                if(observable.value !== undefined && ko.isObservable(observable.value)) {
                    observable.value(floa);
                }
            }
        });
    },
    update: function(element, valueAccessor) {
        var local = ko.toJS(valueAccessor());
        
        if (typeof local === 'number') {
            local = {
                value: local
            };
        }
        if (local.value !== undefined) {
            var floa = parseFloat(local.value.toFixed(1));
            $(element).rateit('value', floa);
        }
        
    },
    options: {
        //this section is to allow users to override the rateit defaults on a per site basis.
        //override by adding ko.bindingHandlers.rateit.options = { ... }
    }
};
You can use the binding handler one of two ways. (Rating is an observable)
<div data-bind="rateit: { value: Rating, max: 10, step: 0.1, readonly: true }"></div>
Or
<div data-bind="rateit: Rating"></div>
The second method will use the RateIt defaults unless you override the options on the binding handler. For example if I wanted to always use a 10 star rater on my site I would add
ko.bindingHandlers.rateit.options = {
    max: 10
}
anywhere after the binding handler was declared, or just simply add it to the options section in the bindinghandler itself.
Coordinator
Aug 3, 2013 at 7:20 AM
Thanks.
Do you mind me adding it to the source control and download of the project?
Aug 3, 2013 at 3:16 PM
Feel free, knockout seems to be pretty popular these days. I threw it together pretty quickly so I can't guarantee there are no bugs, but it seems to work pretty well for what I have been using it for. Let me know if you have any questions on it.
Sep 22, 2014 at 11:54 PM
Nice work OriginalMoose. Thanks for sharing!